/* Gyro Nesne Depolama (S3, beta) tanıtım sayfası — yalnız bu sayfada yüklenir. Görsel yok, yalnız CSS. R2 2026-11-09 */
.gyro-s3-beta { display: inline-block; margin-inline-start: .4rem; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.35); vertical-align: middle; }
.gyro-s3-hero-art { position: relative; }
.gyro-s3-term { background: #0f1b24; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); overflow: hidden; border: 1px solid rgba(255,255,255,.08); max-width: 34rem; margin-inline: auto; }
.gyro-s3-term-head { display: flex; align-items: center; gap: .4rem; padding: .6rem .8rem; background: rgba(255,255,255,.06); }
.gyro-s3-term-head span { width: .65rem; height: .65rem; border-radius: 50%; background: #ff5f57; }
.gyro-s3-term-head span:nth-child(2) { background: #febc2e; } .gyro-s3-term-head span:nth-child(3) { background: #28c840; }
.gyro-s3-term-head em { margin-inline-start: auto; font-style: normal; font-size: .75rem; color: #9fb3c4; }
.gyro-s3-term pre { margin: 0; padding: 1rem 1.1rem 1.2rem; color: #d7e4ee; font: .78rem/1.65 SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; text-align: left; direction: ltr; }
.gyro-s3-term pre b { color: #4fd1c5; font-weight: 700; }
.gyro-s3-grid-3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.gyro-s3-code-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.gyro-s3-code { margin: 0; border-radius: var(--gyro-radius-lg, 14px); border: 1px solid var(--wstyle-border-color, #e3e8ee); background: var(--wstyle-surface-bg, #fff); overflow: hidden; }
.gyro-s3-code figcaption { padding: .55rem .9rem; font-weight: 700; font-size: .85rem; border-bottom: 1px solid var(--wstyle-border-color, #e3e8ee); }
.gyro-s3-code pre { margin: 0; padding: .8rem .9rem; font: .76rem/1.6 SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; direction: ltr; text-align: left; background: rgba(6,81,116,.04); color: inherit; }
.gyro-s3-note { margin: 1rem auto 0; max-width: 52rem; text-align: center; font-size: .9rem; color: var(--wstyle-muted-color, #5b6673); }
.gyro-s3-honest { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; }
.gyro-s3-honest-col { padding: 1.4rem 1.5rem; border-radius: var(--gyro-radius-lg, 14px); background: var(--wstyle-surface-bg, #fff); border: 1px solid var(--wstyle-border-color, #e3e8ee); }
.gyro-s3-honest-col h3 { font-size: 1.05rem; font-weight: 750; display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; }
.gyro-s3-honest-col h3 i { color: #128788; } .gyro-s3-honest-no h3 i { color: #b45309; }
.gyro-s3-honest-col ul { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: .45rem; font-size: .93rem; }
.gyro-s3-dc { display: flex; gap: .6rem; align-items: flex-start; max-width: 52rem; margin: 1.25rem auto 0; padding: .9rem 1.1rem; border-radius: 12px; background: rgba(18,135,136,.08); font-size: .93rem; }
.gyro-s3-dc i { color: #128788; margin-top: .15rem; }
.gyro-s3-soon { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; }
.gyro-s3-soon > li { position: relative; padding: 1.5rem; border-radius: var(--gyro-radius-lg, 14px); border: 1px dashed var(--wstyle-border-color, #cfd8e0); background: var(--wstyle-surface-bg, #fff); }
.gyro-s3-soon > li > i { font-size: 1.6rem; color: #065174; }
.gyro-s3-soon h3 { font-size: 1.05rem; font-weight: 750; margin: .7rem 0 .35rem; }
.gyro-s3-soon p { margin: 0; color: var(--wstyle-muted-color, #5b6673); font-size: .925rem; }
.gyro-s3-soon-badge { position: absolute; inset-inline-end: 1rem; top: 1rem; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: rgba(180,83,9,.12); color: #8a3d05; }
.chrome-dark .gyro-s3-code, .chrome-dark .gyro-s3-honest-col, .chrome-dark .gyro-s3-soon > li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.chrome-dark .gyro-s3-code pre { background: rgba(255,255,255,.04); }
.chrome-dark .gyro-s3-soon > li > i { color: #7cc7d6; } .chrome-dark .gyro-s3-soon-badge { color: #f7c08a; background: rgba(247,192,138,.12); }
.chrome-dark .gyro-s3-soon p, .chrome-dark .gyro-s3-note { color: #b8c4d2; }
.chrome-dark .gyro-s3-honest-col h3, .chrome-dark .gyro-s3-soon h3 { color: #fff; }
@media (max-width: 575.98px) { .gyro-s3-term pre { font-size: .7rem; } }