/* ANKADRA UI — hub.css belirteçleri üstüne ortak bileşenler (fiyat, abonelik, güvenlik, durum sayfaları).
   hub.css'ten SONRA yüklenir. Sayfa iskeleti: <header class="top"> … <main class="sayfa"> … <footer class="alt"> */
.sayfa{width:100%;max-width:1180px;margin:0 auto;padding:clamp(22px,4vw,48px) clamp(16px,3vw,32px) 40px;display:grid;gap:clamp(18px,3vw,28px)}
.sayfa.dar{max-width:860px}
.s-bas{display:grid;gap:10px}
.s-bas .ust{font:600 .76rem var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--c,var(--gold))}
.s-bas h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;letter-spacing:-.03em}
.s-bas p{color:var(--tx2);max-width:64ch;font-size:1.04rem}
.ust-link{font:600 .84rem var(--f-b);color:var(--tx2);text-decoration:none}.ust-link:hover{color:var(--tx)}

.kart{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(16px,2.4vw,24px)}
.kart h2{font-size:1.25rem;letter-spacing:-.01em;margin-bottom:.5em}
.kart h3{font-size:1.02rem;margin-bottom:.35em}
.kart > p + p{margin-top:.6em}
.ikili{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.soluk{color:var(--tx2)}.kucuk{font-size:.86rem}.mono{font-family:var(--f-m)}
.ayrac{height:1px;background:var(--line);margin:14px 0}

/* düğmeler */
.btn{--bc:var(--gold);display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:700 .92rem var(--f-b);padding:.75em 1.2em;border-radius:999px;border:1px solid transparent;background:var(--bc);color:#120d14;cursor:pointer;text-decoration:none;white-space:nowrap;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.07)}.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:none}
.btn.hayalet{background:transparent;color:var(--tx);border-color:var(--line)}.btn.hayalet:hover{border-color:var(--bc)}
.btn.mavi{--bc:var(--bot);color:#fff}.btn.yesil{--bc:var(--mc)}.btn.mor{--bc:var(--com);color:#fff}.btn.kirmizi{--bc:var(--crimson);color:#fff}
.btn.kucuk{padding:.5em .9em;font-size:.82rem}
.btn.tam{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* sekmeler */
.sekmeler{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--bg2);flex-wrap:wrap}
.sekmeler button{font:700 .9rem var(--f-b);color:var(--tx2);background:transparent;border:0;border-radius:999px;padding:.6em 1.15em;cursor:pointer}
.sekmeler button[aria-selected="true"]{background:var(--tx);color:var(--bg)}
.sekmeler button:hover:not([aria-selected="true"]){color:var(--tx)}

/* rozetler */
.rozet{display:inline-flex;align-items:center;gap:.35em;font:700 .7rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;padding:.3em .65em;border-radius:999px;border:1px solid color-mix(in srgb,var(--rc,var(--tx3)) 45%,transparent);color:var(--rc,var(--tx2));background:color-mix(in srgb,var(--rc,var(--tx3)) 12%,transparent)}
.rozet.ok{--rc:#3fbf6a}.rozet.uyari{--rc:#e0a23a}.rozet.hata{--rc:#e0566b}.rozet.bilgi{--rc:var(--bot)}.rozet.altin{--rc:var(--gold)}.rozet.mor{--rc:var(--com)}

/* formlar */
.alan{display:grid;gap:6px}
.alan label{font:600 .84rem var(--f-b);color:var(--tx2)}
.alan input,.alan select,.alan textarea{font:inherit;color:var(--tx);background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:.7em .9em;width:100%}
.alan input:focus,.alan select:focus,.alan textarea:focus{outline:none;border-color:var(--gold)}
.alan small{color:var(--tx3);font-size:.8rem}
.satir{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.satir > .alan{flex:1 1 200px}

/* tablo */
.tablo-sar{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.tablo{width:100%;border-collapse:collapse;font-size:.92rem}
.tablo th,.tablo td{padding:.75em .9em;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.tablo th{font:700 .74rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);background:var(--bg2)}
.tablo tr:last-child td{border-bottom:0}
.tablo td.ort,.tablo th.ort{text-align:center}

/* kutu mesajları */
.kutu{border-radius:14px;padding:12px 14px;border:1px solid var(--line);background:var(--bg2);font-size:.92rem}
.kutu.ok{border-color:#3fbf6a66;background:color-mix(in srgb,#3fbf6a 10%,var(--bg2))}
.kutu.uyari{border-color:#e0a23a66;background:color-mix(in srgb,#e0a23a 10%,var(--bg2))}
.kutu.hata{border-color:#e0566b66;background:color-mix(in srgb,#e0566b 10%,var(--bg2))}
.kod{font:700 1.05rem var(--f-m);letter-spacing:.06em;background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:.35em .7em;display:inline-block;user-select:all}
.iskelet{background:linear-gradient(90deg,var(--bg2),color-mix(in srgb,var(--tx) 6%,var(--bg2)),var(--bg2));background-size:200% 100%;animation:isk 1.3s infinite;border-radius:14px;min-height:80px}
@keyframes isk{to{background-position:-200% 0}}

/* plan kartları */
.planlar{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{--c:var(--tx3);position:relative;display:flex;flex-direction:column;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px}
.plan.vip{--c:var(--gold)}.plan.premium{--c:var(--bot);border-color:color-mix(in srgb,var(--bot) 55%,var(--line));box-shadow:0 30px 80px -40px var(--bot)}
.plan .p-ad{display:flex;align-items:center;gap:.5em;font:800 1.3rem var(--f-d)}
.plan .p-ad span{font-size:1.4rem}
.plan .p-fiyat{font:800 2.2rem var(--f-d);letter-spacing:-.03em}
.plan .p-fiyat small{font:600 .9rem var(--f-b);color:var(--tx3);letter-spacing:0}
.plan .p-yok{font:600 1rem var(--f-b);color:var(--tx3)}
.plan ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.92rem}
.plan li{display:flex;gap:.55em;align-items:flex-start;color:var(--tx2)}
.plan li::before{content:"✓";color:var(--c);font-weight:800}
.plan li.yok::before{content:"–";color:var(--tx3)}
.plan li b{color:var(--tx)}
.plan .btn{margin-top:auto}
.plan .etiket{position:absolute;top:-11px;left:22px;font:700 .68rem var(--f-m);letter-spacing:.14em;text-transform:uppercase;background:var(--c);color:#fff;padding:.35em .8em;border-radius:999px}
@media (max-width:900px){.planlar{grid-template-columns:1fr}}

/* durum sayfası */
.servis{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line)}
.servis:last-child{border-bottom:0}
.servis .nokta{width:12px;height:12px;border-radius:50%;flex:none;background:var(--tx3)}
.servis .nokta.ok{background:#3fbf6a;box-shadow:0 0 0 4px #3fbf6a22}.servis .nokta.yari{background:#e0a23a;box-shadow:0 0 0 4px #e0a23a22}.servis .nokta.yok{background:#e0566b;box-shadow:0 0 0 4px #e0566b22}
.servis .ad{font-weight:700}.servis .ek{margin-left:auto;text-align:right;color:var(--tx2);font-size:.86rem}
.cubuk{display:grid;grid-template-columns:repeat(90,1fr);gap:2px;margin-top:8px;height:26px}
.cubuk i{border-radius:2px;background:var(--line)}
.cubuk i.ok{background:#3fbf6a}.cubuk i.yari{background:#e0a23a}.cubuk i.yok{background:#e0566b}
@media (max-width:600px){.cubuk{grid-template-columns:repeat(45,1fr)}.cubuk i:nth-child(-n+45){display:none}}

.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(30px);opacity:0;pointer-events:none;background:var(--tx);color:var(--bg);font-weight:600;padding:.75em 1.2em;border-radius:999px;transition:.25s;z-index:20;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translateX(-50%)}.toast.hata{background:var(--crimson);color:#fff}