/* ============================================
   MeSite — Sinema teması (uygulama)
   home.html · studio.html · admin.html
   Eski atolye-app.css'in yerine geçer. Sınıf ve id
   adları değişmedi; js/ui.js'in ürettiği işaretleme
   birebir destekleniyor.
   ============================================ */

:root {
    --zemin: #08090b;
    --yuzey: #0b0c10;
    --kart: #101216;
    --kart-ust: #15181e;
    --ak: #f2f4f7;
    --metin: #a9b0b9;
    --metin-soluk: #7d8593;
    --krem: #f0e2cd;
    --canon: #5b8cff;
    --canon-ac: #a8c2ff;
    --champion: #ff7a4d;
    --champion-ac: #ffb391;
    --absolute: #f0e2cd;
    /* Selvi — tek hatlı ağaç. Kanon mavisinden ve şampiyon
       turuncusundan BİLEREK uzak bir yeşil: selvi bir taht değil bir
       TÜR, ve iki tahtın rengini ödünç alsaydı hangisini kazandığı
       sanılırdı. */
    --selvi: #7fb08a;
    --gold: #f0e2cd;
    --jade: #7fd4a8;
    --danger: #ff6b5c;
    --cizgi: rgba(255, 255, 255, .1);
    --cizgi-kart: rgba(255, 255, 255, .12);
    --baslik: 'Saira Condensed', 'Helvetica Neue', sans-serif;
    --govde: Saira, 'Helvetica Neue', sans-serif;
    --serif: 'Saira Condensed', 'Helvetica Neue', sans-serif;
    --space-sm: 8px;
    --space-md: 14px;
    --space-lg: 22px;
    --en: 1480px;
    --yan: clamp(18px, 3.5vw, 44px);
}

/* Başlık ağırlığı TEK YERDE. 22 Ağustos'ta sekiz seçici birbirinden
   ayrışmıştı ve ölçüt olan .chart__title'ın yanında hepsi başka bir
   sesle konuşuyordu; o gün eşitlendi ve bu satır "bir daha
   ayrışmasınlar" diye kondu. Tasarım yenilemesinde düştü, geri geldi. */
h1, h2, h3 { font-weight: 700; }

/* `hidden` özniteliği HER yerde kazanır.
   Tarayıcının kendi `[hidden] { display: none }` kuralı bir SINIF
   kuralıyla aynı ağırlıkta (0,1,0); `.chat__opts { display: flex }`
   gibi bir satır onu sessizce eziyor ve JS `opts.hidden = true` dese
   bile menü açık kalıyor. Bu tuzağa bu depoda üç kez düşüldü
   (`.row__nav[hidden]`, `.theater__placeholder[hidden]`, ve 11
   Eylül'de sohbet menüsü). Tek yerden kapatılıyor. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
    font-family: var(--govde);
    font-size: 15.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--canon); text-decoration: none; }
a:hover { color: var(--canon-ac); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Üst çubuk ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px clamp(10px, 1.4vw, 20px);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 13px var(--yan);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background: rgba(8, 9, 11, .93);
    backdrop-filter: blur(12px);
}
.topbar__brand, .brand {
    font-family: var(--baslik);
    font-weight: 700;
    font-size: 25px;
    line-height: 1;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ak);
}
.topbar__brand:hover { color: var(--ak); }
.topbar::-webkit-scrollbar { display: none; }
.topbar > * { flex: 0 0 auto; }
.topbar__spacer { flex: 1 1 auto; min-width: 4px; }
.topbar .btn { padding: 9px clamp(11px, 1.2vw, 18px); font-size: 13.5px; }
.topbar .wallet { padding: 6px 11px; font-size: 13.5px; }
@media (max-width: 720px) {
    .topbar__brand, .brand { font-size: 21px; }
    .topbar .btn, .topbar .wallet, .navlink { font-size: 12.5px; }
}

.navlink {
    font-family: var(--baslik);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--metin-soluk);
    white-space: nowrap;
    transition: color .25s;
}
.navlink:hover { color: var(--ak); }
.navlink.is-current {
    color: var(--ak);
    border-bottom: 2px solid var(--krem);
    padding-bottom: 1px;
}

.wallet {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: 14px;
    font-weight: 500;
    color: var(--ak);
    white-space: nowrap;
}
/* Yakıt profile taşındı: üst çubuk tek sayaçla kalıyor. */
.wallet--fuel { display: none !important; }

/* ---------- Düğmeler ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    font-family: var(--baslik);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zemin);
    background: var(--ak);
    cursor: pointer;
    white-space: nowrap;
    transition: background .25s, border-color .25s, color .25s;
}
.btn:hover { background: var(--canon); color: var(--zemin); }
.btn--gold { background: var(--ak); color: var(--zemin); }
.btn--gold:hover { background: var(--canon); }
.btn--ghost {
    background: none;
    border: 1px solid rgba(255, 255, 255, .22);
    color: var(--ak);
    font-weight: 600;
}
.btn--ghost:hover { background: rgba(242, 244, 247, .1); border-color: rgba(255, 255, 255, .5); color: var(--ak); }
.btn--quiet {
    background: none;
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--metin);
    font-weight: 600;
}
.btn--quiet:hover { background: rgba(242, 244, 247, .08); color: var(--ak); }
.btn--icon { padding: 10px 14px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:disabled:hover { background: var(--ak); color: var(--zemin); }

.input {
    width: 100%;
    padding: 14px 15px;
    background: var(--zemin);
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--ak);
    font-family: var(--govde);
    font-size: 15.5px;
    outline: none;
    transition: border-color .25s;
}
.input:focus { border-color: var(--canon); }
.input::placeholder { color: var(--metin-soluk); }
select.input { cursor: pointer; }

/* ---------- Gövde şeridi (keşfin omurgası) ---------- */

.spine {
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background: var(--yuzey);
}
.spine__inner {
    max-width: var(--en);
    margin: 0 auto;
    padding: clamp(22px, 3vw, 36px) var(--yan);
    display: flex;
    flex-wrap: wrap;
    gap: 22px clamp(26px, 3vw, 42px);
    align-items: flex-start;
}
.spine__head {
    flex: 1 1 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 20px;
    flex-wrap: wrap;
}
.spine__label {
    font-family: var(--baslik);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--metin-soluk);
}
.spine__meta { font-size: 13px; color: var(--metin-soluk); }

.spine__track {
    flex: 1 1 520px;
    min-width: 0;
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}
.spine__track::-webkit-scrollbar { height: 6px; }
.spine__track::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }

.stop {
    flex: 1 0 140px;
    min-width: 140px;
    display: block;
    color: inherit;
    padding-right: 10px;
}
.stop:hover { color: inherit; }
.stop__label {
    display: block;
    height: 16px;
    font-family: var(--baslik);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--canon);
    white-space: nowrap;
    overflow: hidden;
}
.stop--first .stop__label { color: var(--metin-soluk); }
.stop--absolute .stop__label, .stop--current .stop__label { color: var(--absolute); }

.stop__cover {
    display: block;
    margin-top: 7px;
    aspect-ratio: 16 / 9;
    background: #14171c center / cover no-repeat;
    border: 1px solid rgba(255, 255, 255, .13);
    opacity: .72;
    transition: opacity .25s;
}
.stop:hover .stop__cover { opacity: 1; }
.stop--canon .stop__cover { border-color: rgba(91, 140, 255, .5); opacity: .82; }
.stop--current .stop__cover, .stop--absolute .stop__cover {
    border: 2px solid var(--absolute);
    opacity: 1;
}
.stop__cover.is-empty {
    background: linear-gradient(140deg, #171a20 0%, #0d0f13 100%);
}

.stop__line {
    display: block;
    height: 22px;
    position: relative;
}
.stop__line::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, .2);
}
.stop--canon .stop__line::before { background: rgba(91, 140, 255, .45); }
.stop--current .stop__line::before { background: var(--absolute); }
.stop--first .stop__line::before { left: 50%; }
.stop--last .stop__line::before { right: 50%; }
.stop__line::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 11px; height: 11px;
    border-radius: 6px;
    background: var(--zemin);
    border: 1px solid rgba(255, 255, 255, .45);
}
.stop--canon .stop__line::after { border-color: var(--canon); }
.stop--current .stop__line::after {
    background: var(--absolute);
    border-color: var(--absolute);
    box-shadow: 0 0 0 4px rgba(240, 226, 205, .16);
}

.stop__title {
    display: block;
    font-family: var(--baslik);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--ak);
}
.stop__meta { display: block; margin-top: 2px; font-size: 11.5px; color: var(--metin-soluk); }

.spine__side {
    flex: 1 1 250px;
    min-width: 0;
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, .11);
    background: var(--kart);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 26px;
}
.spine__count {
    flex: 0 0 auto;
    font-family: var(--baslik);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--ak);
}
.spine__note { flex: 1 1 200px; margin: 0; font-size: 14px; line-height: 1.65; color: #8b929c; }
.spine__side .btn { flex: 0 0 auto; }

/* ---------- Raflar (yarım bıraktıkların) ---------- */

.rows { max-width: var(--en); margin: 0 auto; padding: 0 var(--yan); }

.row { padding: clamp(24px, 3vw, 34px) 0 0; }
.row__head {
    display: flex;
    align-items: baseline;
    gap: 10px 20px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.row__title {
    margin: 0;
    font-family: var(--baslik);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--metin-soluk);
}
.row__sub { font-size: 13px; color: var(--metin-soluk); }
.row__empty { margin: 0; font-size: 14px; color: var(--metin-soluk); }

/* Kart genişliği TEK yerde: hem ızgara hem ok onu okuyor. Ok kapağın
   yüksekliğine oturuyor (16:9); iki ayrı sayı olsaydı biri değiştiğinde
   ok yeniden kaymaya başlardı. */
.row__viewport { position: relative; --kart-en: clamp(220px, 25vw, 280px); }
.row__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--kart-en);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}
.row__track::-webkit-scrollbar { height: 6px; }
.row__track::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }

/* 11 Eylül: ok kapağın ÜSTÜNE biniyordu (kapalı beta bildirimi). İki
   sebep vardı: `left: -24px` 38px'lik bir düğmeyi 14px kapağın içine
   sokuyordu, ve `top: 50%` kapağın değil KARTIN ortasıydı — altındaki
   başlık ve rozet merkezi aşağı çekiyordu.
   Artık ok kenar boşluğunun (`--yan`) İÇİNDE duruyor: sol kenarı sayfanın
   kenarında, genişliği boşluktan 6px dar. Boşluk ne kadar daralırsa ok da
   o kadar daralıyor, kapağa hiçbir genişlikte değmiyor. Yüksekliği
   kapağın kendisi — Netflix'teki gibi. */
.row__nav {
    position: absolute;
    top: 0;
    height: calc(var(--kart-en) * 9 / 16);
    z-index: 4;
    width: calc(var(--yan) - 6px);
    max-width: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(8, 9, 11, .88);
    backdrop-filter: blur(8px);
    color: var(--ak);
    font-size: 18px;
    cursor: pointer;
    transition: background .25s, border-color .25s;
}
.row__nav:hover { background: rgba(242, 244, 247, .16); border-color: var(--ak); }
.row__nav--prev { left: calc(-1 * var(--yan)); }
.row__nav--next { right: calc(-1 * var(--yan)); }
.row__nav[hidden] { display: none; }
/* Dokunmatik ekranda ve dar pencerede ok YOK: parmak zaten kaydırıyor, ve
   720px altında kenar boşluğu (18–25px) bir düğme taşıyacak kadar geniş
   değil. Oku kapağın üstüne geri koymak, düzeltilen arızayı geri getirmek
   olurdu. */
@media (hover: none), (max-width: 720px) {
    .row__nav { display: none; }
}

/* ---------- Kart (tile) ---------- */

.tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.tile:hover .tile__cover, .tile:hover::before { border-color: rgba(255, 255, 255, .42); }

.tile__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #14171c center / cover no-repeat;
    margin-bottom: 12px;
    transition: border-color .3s;
}
.tile:not(:has(.tile__cover))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(140deg, #171a20 0%, #0d0f13 100%);
    margin-bottom: 12px;
    transition: border-color .3s;
}
.tile__theme { display: none; }

.tile__title {
    min-width: 0;
    font-family: var(--baslik);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.18;
    color: var(--ak);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
    padding: 0 4px;
}
.tile__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 18px;
    padding: 0 4px;
}
.tile__stat { font-size: 12px; color: var(--metin-soluk); white-space: nowrap; }

.tile--rot { opacity: 1; }
.tile--rot .tile__title { color: var(--metin); }
.tile--rot .tile__cover, .tile--rot::before { filter: grayscale(1); }

.chip {
    display: inline-block;
    padding: 3px 8px;
    font-family: var(--baslik);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--zemin);
    background: rgba(255, 255, 255, .7);
    white-space: nowrap;
}
.chip--canon { background: var(--canon); color: var(--zemin); }
.chip--champion { background: var(--champion); color: var(--zemin); }
.chip--absolute { background: var(--absolute); color: var(--zemin); }
.chip--selvi { background: var(--selvi); color: var(--zemin); }

.tile--canon { border-color: rgba(91, 140, 255, .4); }
.tile--champion { border-color: rgba(255, 122, 77, .4); }
.tile--absolute { border-color: rgba(240, 226, 205, .5); }
.tile--selvi { border-color: rgba(127, 176, 138, .45); }

/* ---------- En çok izlenenler ızgarası ---------- */

.chart {
    max-width: var(--en);
    margin: 0 auto;
    padding: clamp(30px, 4vw, 48px) var(--yan) clamp(52px, 6vw, 88px);
}
.chart__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.chart__title {
    margin: 0;
    font-family: var(--baslik);
    font-weight: 700;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--ak);
}
.chart__sub { margin: 0; font-size: 13.5px; color: var(--metin-soluk); }

.chart__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}

.chart-card { display: block; color: inherit; }
.chart-card:hover { color: inherit; }
.chart-card__frame {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(255, 255, 255, .12);
    transition: border-color .3s;
}
.chart-card:hover .chart-card__frame { border-color: rgba(255, 255, 255, .42); }
.chart-card--canon:hover .chart-card__frame { border-color: var(--canon); }
.chart-card--champion:hover .chart-card__frame { border-color: var(--champion); }
.chart-card--absolute .chart-card__frame { border-color: rgba(240, 226, 205, .5); }
.chart-card--absolute:hover .chart-card__frame { border-color: var(--absolute); }
.chart-card--selvi:hover .chart-card__frame { border-color: var(--selvi); }

/* ---------- Tohum modalı: dallanma modu seçimi ---------- */

.mod-secim {
    border: 1px solid var(--cizgi);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0;
    display: grid;
    gap: 8px;
}

.mod-secim legend { padding: 0 6px; }

/* Kutu bir <label>: radyo düğmesinin kendisi küçük ve parmakla
   zor tutuluyor; etiketin tamamını hedef yapmak dokunma alanını
   satırın tamamına genişletiyor. */
.mod-secim__kutu {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "radyo ad" "radyo aciklama";
    gap: 2px 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.mod-secim__kutu:hover { border-color: var(--cizgi-kart); }
.mod-secim__kutu input { grid-area: radyo; accent-color: var(--selvi); }

.mod-secim__ad {
    grid-area: ad;
    font-family: var(--govde);
    font-weight: 700;
    letter-spacing: .04em;
}

.mod-secim__aciklama {
    grid-area: aciklama;
    font-size: .82rem;
    opacity: .68;
}

/* Seçili kutu görünür olmalı: radyo düğmesinin kendisi 14px ve
   telefonda hangisinin seçili olduğu bir bakışta anlaşılmıyordu. */
.mod-secim__kutu:has(input:checked) {
    border-color: var(--selvi);
    background: rgba(127, 176, 138, .08);
}

.chart-card__cover {
    position: absolute;
    inset: 0;
    background: #14171c center / cover no-repeat;
}
.chart-card__cover.is-empty { background: linear-gradient(140deg, #171a20 0%, #0d0f13 100%); }

/* Rakamın üçüncü hâli (26 Ağustos): kapağın sol alt köşesinden DIŞARI
   taşıyor. Dolgu sayfanın zemin rengiyle aynı, yani kapağa taşan parça
   görüntüde rakam biçiminde bir oyuk açıyor; dışarıda kalan parça
   yalnızca konturuyla görünüyor. Tasarım yenilemesinde kutunun içine
   geri dönmüştü, karar geri alındı. */
.chart-card__rank {
    position: absolute;
    /* Negatif: rakam çerçevenin dışına çıkıyor. Değer ızgaranın
       `gap`iyle aynı mertebede tutuldu ki taşan parça komşu kapağın
       üstüne binmesin, aradaki boşlukta kalsın. */
    left: clamp(-22px, -1.6vw, -13px);
    bottom: -4px;
    z-index: 2;
    display: block;
    font-family: var(--baslik);
    font-size: clamp(54px, 5.4vw, 96px);
    font-weight: 700;
    line-height: .76;
    letter-spacing: -.05em;
    color: var(--zemin);
    -webkit-text-stroke: 1.5px rgba(240, 226, 205, .6);
    text-shadow: 0 3px 14px rgba(0, 0, 0, .55);
}
.chart-card:hover .chart-card__rank { -webkit-text-stroke-color: var(--gold); }
/* İlk üç sıra: kontur parlıyor, göz listenin başını bir bakışta buluyor. */
.chart-card:nth-child(-n+3) .chart-card__rank {
    -webkit-text-stroke-color: var(--gold);
    text-shadow: 0 3px 14px rgba(0, 0, 0, .8), 0 0 30px rgba(240, 226, 205, .26);
}
/* Kontur çizemeyen tarayıcıda rakam zeminle aynı renkte, yani GÖRÜNMEZ
   kalırdı. Dolgu zemin rengi olduğu için bu yedek kritik. */
@supports not (-webkit-text-stroke: 1px red) {
    .chart-card__rank { color: rgba(240, 226, 205, .7); }
}
/* Rozet sol alt köşeden ÜST SAĞA taşındı: o köşe artık rakamın.
   (21 Ağustos'a kadar da orada duruyordu.) */
.chart-card__frame .chip {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

.chart-card__body { display: block; margin-top: 10px; }
.chart-card__title {
    display: block;
    font-family: var(--baslik);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--ak);
}
.chart-card__meta { display: block; margin-top: 3px; font-size: 12.5px; color: var(--metin-soluk); }

/* ---------- Kalıcı pencereler (modal) ---------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(14px, 3vw, 40px);
    background: rgba(8, 9, 11, .9);
    backdrop-filter: blur(12px);
    overflow-y: auto;
}
/* `align-items: center` + içerikten TAŞAN bir kutu = kutunun ÜSTÜ
   erişilemez oluyor: kaydırma yukarı gitmiyor, tepesi kesik kalıyor.
   13 Ağustos'ta öğretici ekranında aynı hataya düşülmüş ve aynı çözüm
   bulunmuştu: yaslamayı başa al, ortalamayı kutunun `margin: auto`suna
   bırak. Sığdığında ortalı, sığmadığında kaydırılabilir. */
.modal__box { margin: auto; }
.modal.is-open { display: flex; }
.modal__box {
    width: 100%;
    max-width: 460px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: var(--kart);
    padding: clamp(20px, 3vw, 30px);
}
.modal__box--wide { max-width: 1180px; }
.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.modal__title {
    margin: 0;
    font-family: var(--baslik);
    font-weight: 700;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--ak);
}
.modal__close {
    width: 36px; height: 36px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: none;
    color: var(--metin);
    font-size: 14px;
    cursor: pointer;
    transition: color .25s, border-color .25s;
}
.modal__close:hover { color: var(--ak); border-color: rgba(255, 255, 255, .45); }
.modal__body { display: flex; flex-direction: column; gap: 10px; }

.authtabs { display: flex; gap: 24px; border-bottom: 1px solid var(--cizgi); margin-bottom: 22px; }
.tab {
    padding: 0 0 12px;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    font-family: var(--baslik);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--metin-soluk);
    cursor: pointer;
    transition: color .25s;
}
.tab:hover { color: var(--ak); }
.tab.is-active { color: var(--ak); border-bottom-color: var(--krem); }

.authmsg { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--danger); }
.forgotlink { font-size: 13.5px; color: var(--canon); }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.6; color: var(--metin); cursor: pointer; }
.consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--canon); }
.hint { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--metin-soluk); }

.filepick {
    display: block;
    padding: 15px;
    border: 1px dashed rgba(255, 255, 255, .24);
    text-align: center;
    font-size: 14.5px;
    color: var(--metin);
    cursor: pointer;
    transition: border-color .25s, color .25s;
}
.filepick:hover { border-color: rgba(255, 255, 255, .5); color: var(--ak); }
.filepick.has-file { border-color: var(--krem); color: var(--krem); border-style: solid; }

.uploadbar { display: none; height: 4px; background: rgba(255, 255, 255, .16); }
.uploadbar.is-active { display: block; }
.uploadbar__fill { width: 0; height: 4px; background: var(--krem); transition: width .3s; }

.araclar { display: flex; flex-wrap: wrap; gap: 8px; }

#mapCanvas { min-height: 380px; overflow: auto; background: var(--zemin); border: 1px solid var(--cizgi); }
.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--cizgi);
    font-size: 13px;
    color: var(--metin);
}
.map-legend span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.swatch { width: 16px; height: 3px; display: inline-block; }

/* ---------- Bildirim ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 20px);
    z-index: 80;
    max-width: min(520px, calc(100vw - 32px));
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(11, 12, 16, .97);
    backdrop-filter: blur(10px);
    color: var(--ak);
    font-size: 14.5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}
.toast.is-open { opacity: 1; transform: translate(-50%, 0); }
.toast--bad { border-color: rgba(255, 107, 92, .55); }
.toast--good { border-color: rgba(127, 212, 168, .55); }

/* ---------- Sohbet ---------- */

.chat {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: min(340px, 92vw);
    font-size: 14px;
}
.chat__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-right: none;
    background: rgba(11, 12, 16, .96);
    backdrop-filter: blur(10px);
    color: var(--ak);
    font-family: var(--baslik);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}
.chat__toggle:hover { background: var(--kart-ust); }
.chat__badge {
    padding: 2px 7px;
    background: var(--champion);
    color: var(--zemin);
    font-size: 11px;
    font-weight: 700;
}
.chat__panel {
    display: flex;
    flex-direction: column;
    height: min(52vh, 440px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-right: none;
    border-top: none;
    background: rgba(11, 12, 16, .97);
    backdrop-filter: blur(12px);
}
.chat__rooms { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; }
.chat__log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.chat__compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--cizgi); }
.chat__compose .input { padding: 11px 12px; font-size: 14px; }

.minifooter {
    max-width: var(--en);
    margin: 0 auto;
    padding: 22px var(--yan);
    border-top: 1px solid rgba(255, 255, 255, .09);
    display: flex;
    align-items: baseline;
    gap: 6px 18px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--metin-soluk);
}
/* Bağlantılar inline kardeş; space-between olsa ayıraç ortada kalırdı.
   Boşluğu gap taşıyor, dekoratif "·" gizleniyor. */
.minifooter > [aria-hidden="true"] { display: none; }
.minifooter a { color: var(--metin-soluk); }
.minifooter a:hover { color: var(--ak); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .row__track { scroll-behavior: auto; }
}


/* ============================================
   Taşınan kurallar — js'in bastığı ama yeni temada
   karşılığı olmayan sınıflar. (denetim: 2026-09-09)
   Kaynak: eski atolye-app.css, yeni palete çevrildi.
   ============================================ */

/* ---------- Şifre göster/gizle (sifre-goster.js) ----------
   Düğme kutunun içinde yüzüyor; input sağdan dolgu alıyor,
   yoksa metin düğmenin altına girer. */
.passwrap { position: relative; display: block; }
.passwrap .input { padding-right: 52px; }
.passeye {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--metin);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: .6;
    transition: opacity .2s, color .2s;
}
.passeye:hover { opacity: 1; color: var(--ak); }
.passeye:focus-visible { outline: 2px solid var(--canon); outline-offset: -3px; opacity: 1; }
.passwrap.is-acik .passeye { opacity: 1; color: var(--krem); }

/* ---------- Hikaye ağacı (agac.js) ----------
   Düğümler mutlak konumlu; çizgiler altta duran bir svg.
   Boyutları agac.js inline veriyor, buradaki kurallar görünüm. */
.agac { position: relative; }
.agac__cizgiler { position: absolute; inset: 0; display: block; }
.agac__bos {
    padding: 48px 16px;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--metin-soluk);
}

.agac__dugum {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--cizgi-kart);
    background: var(--kart);
    color: inherit;
    text-align: left;
    text-decoration: none;
    overflow: hidden;
    transition: border-color .3s, background .3s;
}
.agac__dugum:hover { border-color: rgba(255, 255, 255, .42); background: var(--kart-ust); color: inherit; }
.agac__dugum:focus-visible { outline: 2px solid var(--canon); outline-offset: 2px; }

.agac__rozet {
    font-family: var(--baslik);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--metin-soluk);
    white-space: nowrap;
    overflow: hidden;
}
.agac__ad {
    font-family: var(--baslik);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--ak);
}
.agac__alt { font-size: 11.5px; color: var(--metin-soluk); }

.agac__dugum--kanon { border-color: rgba(91, 140, 255, .5); }
.agac__dugum--kanon .agac__rozet { color: var(--canon-ac); }
.agac__dugum--secilmis { border-color: rgba(255, 122, 77, .5); }
.agac__dugum--secilmis .agac__rozet { color: var(--champion-ac); }
.agac__dugum--mutlak {
    border: 2px solid var(--absolute);
    background: #14140f;
    box-shadow: 0 0 0 5px rgba(240, 226, 205, .1);
}
.agac__dugum--mutlak .agac__rozet { color: var(--absolute); }
.agac__dugum--mutlak .agac__ad { color: var(--ak); }
/* Çürük dal: soluklaştırmak yerine renksizleştiriyoruz —
   koyu zeminde opacity okunurluğu bitiriyordu. */
.agac__dugum--curuk { border-style: dashed; border-color: rgba(255, 255, 255, .34); }
.agac__dugum--curuk .agac__ad { color: var(--metin); }
.agac__dugum--curuk .agac__rozet { color: var(--metin); }
.agac__dugum--silinmis { border-color: rgba(255, 255, 255, .12); }
.agac__dugum--silinmis .agac__ad, .agac__dugum--silinmis .agac__rozet { color: var(--metin-soluk); }

/* ---------- Üretim aracı rafı (araclar.js) ---------- */
.araclar__sira { display: flex; flex-wrap: wrap; gap: 7px; }
.araclar__arac {
    padding: 9px 14px;
    border: 1px solid var(--cizgi-kart);
    background: none;
    color: var(--metin);
    font-family: var(--baslik);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .06em;
    cursor: pointer;
    transition: border-color .25s, color .25s, background .25s;
}
.araclar__arac:hover { border-color: rgba(255, 255, 255, .42); color: var(--ak); }
.araclar__arac:focus-visible { outline: 2px solid var(--canon); outline-offset: 2px; }
.araclar__arac.is-secili { border-color: var(--krem); color: var(--krem); background: rgba(240, 226, 205, .08); }
.araclar__hint { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--metin-soluk); }

/* ---------- Sohbet: eksik kalan parçalar (sohbet.js) ---------- */
.chat__input { flex: 1 1 auto; min-width: 0; }
.chat__send { flex: 0 0 auto; padding: 11px 16px; font-size: 13px; }
.chat__note { padding: 0 12px; min-height: 0; font-size: 12.5px; color: var(--danger); }
.chat__note:empty { display: none; }
.chat__foot {
    margin: 0;
    padding: 8px 12px 11px;
    border-top: 1px solid var(--cizgi);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--metin-soluk);
}
.chat__foot a { color: var(--metin); border-bottom: 1px solid var(--cizgi); }
.chat__foot a:hover { color: var(--ak); }

.chart__inner { width: 100%; }

/* Silme gibi geri alınamaz eylemde düğme ikinci tıklamayı bekler. */
.btn.is-arming { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.is-arming:hover { background: var(--danger); color: #fff; }

/* ============================================
   Tek başına duran panel sayfaları
   sifre-sifirla.html — kendi css'i yok, buradan besleniyor.
   admin.html bunları atolye-admin.css'te kendi ölçüsüyle
   ezdiği için sıra önemli: app önce, admin sonra.
   ============================================ */

body:has(.shell) { min-height: 100vh; display: flex; flex-direction: column; }
.shell { flex: 1 1 auto; padding: clamp(28px, 4vw, 48px) var(--yan); }
.console { width: 100%; max-width: 900px; margin: 0 auto; }

/* Ortada duran giriş/sıfırlama kutusu */
.panel:has(.panel__brand) {
    width: 100%;
    max-width: 460px;
    margin: auto;
    padding: clamp(24px, 3.4vw, 36px);
    border: 1px solid var(--cizgi-kart);
    background: var(--yuzey);
}
body:has(.panel__brand) .shell { display: flex; }

.panel__brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 26px;
    font-family: var(--baslik);
    font-weight: 700;
    font-size: 25px;
    line-height: 1;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ak);
}
.panel__brand:hover { color: var(--ak); }

.panel__title {
    margin: 0;
    font-family: var(--baslik);
    font-weight: 700;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--ak);
    text-wrap: pretty;
}
.panel__lead { margin: 14px 0 24px; font-size: 15px; line-height: 1.75; color: var(--metin); text-wrap: pretty; }

.stack { display: flex; flex-direction: column; gap: 12px; }

/* Şifre gücü ölçeri — sifre-goster.js genişliği ve rengi veriyor. */
.meter { height: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.meter__fill { width: 0; height: 100%; background: var(--danger); transition: width .35s ease, background .35s ease; }

.msg {
    min-height: 20px;
    margin-top: 18px;
    font-size: 13.5px;
    line-height: 1.65;
    word-break: break-word;
    color: var(--danger);
}
.msg.is-ok, .msg.is-good { color: var(--jade); }
.msg.is-busy { color: var(--krem); }
.msg.is-warn { color: var(--champion-ac); }
.msg.is-bad { color: var(--danger); }

.footnote {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--cizgi);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--metin-soluk);
}
.footnote code { font-size: 12px; color: var(--krem); background: rgba(240, 226, 205, .08); padding: 2px 6px; }

.backlink {
    display: inline-block;
    margin-top: 24px;
    font-family: var(--baslik);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--metin-soluk);
    transition: color .25s;
}
.backlink:hover { color: var(--ak); }

/* Chat Menu Styles */
.chat__menu { position: relative; margin-left: auto; }
.chat__more {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 16px;
    padding: 0 4px;
    cursor: pointer;
}
.chat__more:hover { color: rgba(255,255,255,0.8); }
.chat__opts {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--zemin);
    border: 1px solid var(--cizgi);
    border-radius: 4px;
    padding: 4px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat__opt {
    background: transparent;
    border: none;
    color: var(--ak);
    font-family: var(--govde);
    font-size: 13px;
    text-align: left;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
}
.chat__opt:hover { background: var(--kart); }
.chat__opt--danger { color: var(--champion); }

/* ---------- Profil Modal ---------- */
/* Aşağıdaki blok 11 Eylül'de geri kondu. Bu sınıfların tamamı JS'ten
   `el('div', 'ledger-row')` gibi ARGÜMAN olarak veriliyor; 39. bölümün
   ilk hâli yalnızca `className = '...'` desenini tarıyordu, o yüzden
   profil modalının ve sohbetin stilsiz kaldığını görmemişti. Bekçi
   düzeltildi, kurallar da yeni paletin diliyle geri geldi. */
.card-block {
    padding: 22px;
    border: 1px solid var(--cizgi-kart);
    background: var(--yuzey);
}
.card-block + .card-block { margin-top: 20px; }
.card-block h3, .card-block h2 {
    margin: 0 0 14px;
    font-family: var(--baslik);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.15;
    color: var(--ak);
}
.prof-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.prof-grid .card-block { display: flex; flex-direction: column; }

.prof-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--metin-soluk); }

.prof-form { display: flex; flex-direction: column; gap: 10px; }
.prof-form .btn { align-self: flex-start; }

.fuel-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; }
.fuel-row__label { color: var(--metin); font-size: 13.5px; }
.fuel-row__val { font-family: var(--baslik); font-size: 17px; font-weight: 700; color: var(--ak); white-space: nowrap; }
.fuel-convert { display: flex; gap: 8px; margin-top: 14px; }
.fuel-convert .input { flex: 1; min-width: 0; }

/* Cüzdan geçmişi: TARİH ilk sütun. Bir defter satırının "ne zaman"ı
   olmadan "ne kadar"ı yarım bilgi — bakiyenin neden değiştiğini
   sorabilmek için tarih şart. */
.ledger-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 4px 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(240, 226, 205, .1);
    font-size: 13.5px;
}
.ledger-row:last-child { border-bottom: none; }
.ledger-row__date {
    font-family: var(--baslik);
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--metin-soluk);
    white-space: nowrap;
}
.ledger-row__label { min-width: 0; color: var(--metin); overflow-wrap: anywhere; }
.ledger-row__amount {
    white-space: nowrap;
    font-family: var(--baslik);
    font-size: 15px;
    font-weight: 700;
    text-align: right;
}
.ledger-row__amount.is-gain { color: var(--jade); }
.ledger-row__amount.is-loss { color: var(--champion); }
/* "kalan" tutarın ALTINDA, sağa yaslı: satır üç sütun kalıyor,
   dördüncü sütun dar ekranda taşmaya sebep olurdu. */
.ledger-row__after {
    grid-column: 3;
    font-size: 11.5px;
    color: var(--metin-soluk);
    text-align: right;
    white-space: nowrap;
}

.chat__msg { display: flex; flex-direction: column; gap: 3px; }
.chat__msg.is-mine .chat__who { color: var(--krem); }
.chat__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--metin);
    /* Kullanıcı metni: uzun bir kelime paneli yatay taşırmasın. */
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.chat__body--silinmis { color: var(--metin-soluk); font-style: italic; }
.chat__room {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: none;
    border: 1px solid transparent;
    color: var(--metin);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}
.chat__room:hover { color: var(--krem); }
.chat__room.is-active { color: var(--gold); border-color: var(--cizgi-kart); }
.chat__empty { margin: auto 0; font-size: 13px; font-style: italic; color: var(--metin-soluk); text-align: center; }
.chat__dot {
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold);
    color: var(--zemin);
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
}

/* Katlanan bölüm başlığı (şifre değiştir). */
.card-block__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.card-block__toggle .isaret { color: var(--metin-soluk); transition: transform .2s; }
.card-block__toggle[aria-expanded="true"] .isaret { transform: rotate(45deg); }
.prof-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.prof-row:last-child {
    border-bottom: none;
}
.prof-row__label {
    font-weight: 600;
    color: var(--metin-soluk);
}
.prof-row__val {
    font-weight: 500;
    color: var(--ak);
    text-align: right;
}

/* Chat Meta Fix */
.chat__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.chat__who {
    font-weight: 600;
    color: var(--ak);
}
.chat__time {
    font-size: 11px;
    color: var(--metin-soluk);
}