/* Platform kök alan adı sayfaları: tanıtım, kayıt, giriş, panel.
   Harici CSS çerçevesi kullanılmaz; renk ve aralık değerleri CSS değişkenleriyle tanımlanır. */

:root {
    --renk-arka-plan: #ffffff;
    --renk-yuzey: #f5f7f9;
    --renk-metin: #14181d;
    --renk-soluk: #5a6572;
    --renk-vurgu: #1f5f8b;
    --renk-vurgu-zit: #ffffff;
    --renk-kenarlik: #e1e6ea;
    --renk-uyari: #b4530a;
    --renk-basari: #1d6f45;
    --kose-yaricapi: 10px;
    --azami-genislik: 1080px;
    --aralik-kucuk: 12px;
    --aralik-orta: 24px;
    --aralik-buyuk: 72px;
    --yazi: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

body {
    margin: 0;
    font-family: var(--yazi);
    font-size: 17px;
    line-height: 1.65;
    color: var(--renk-metin);
    background: var(--renk-arka-plan);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); letter-spacing: -0.01em; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }
a { color: var(--renk-vurgu); }

.kapsayici { width: 100%; max-width: var(--azami-genislik); margin: 0 auto; padding: 0 var(--aralik-orta); }
.dar { max-width: 460px; }

.ust-cubuk { border-bottom: 1px solid var(--renk-kenarlik); }
.ust-cubuk .kapsayici {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 68px; gap: var(--aralik-orta); flex-wrap: wrap;
}
.marka { font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--renk-metin); }
.ust-menu { display: flex; align-items: center; gap: var(--aralik-kucuk); flex-wrap: wrap; }

.buton {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 20px; border-radius: var(--kose-yaricapi);
    background: var(--renk-vurgu); color: var(--renk-vurgu-zit);
    text-decoration: none; font-weight: 600; border: 1px solid var(--renk-vurgu);
    cursor: pointer; font-size: 0.98rem; font-family: inherit;
}
.buton:hover { filter: brightness(1.08); }
.buton:disabled { opacity: 0.6; cursor: not-allowed; }
.buton-ikincil { background: transparent; color: var(--renk-vurgu); }
.buton-sade {
    background: transparent; color: var(--renk-soluk);
    border-color: var(--renk-kenarlik);
}
.buton-kucuk { padding: 6px 12px; font-size: 0.85rem; }
.buton-grubu { display: flex; flex-wrap: wrap; gap: var(--aralik-kucuk); }

.bolum { padding: var(--aralik-buyuk) 0; }
.bolum-yuzey { background: var(--renk-yuzey); }
.bolum-basligi { max-width: 640px; margin-bottom: 40px; }
.bolum-basligi p { color: var(--renk-soluk); margin: 0; }

.izgara { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.kart {
    background: var(--renk-arka-plan);
    border: 1px solid var(--renk-kenarlik);
    border-radius: var(--kose-yaricapi);
    padding: var(--aralik-orta);
}
.kart p { color: var(--renk-soluk); margin: 0; }

table.paket-tablosu { width: 100%; border-collapse: collapse; background: var(--renk-arka-plan); font-size: 0.95rem; }
table.paket-tablosu th, table.paket-tablosu td {
    border: 1px solid var(--renk-kenarlik); padding: 12px 14px; text-align: left; vertical-align: top;
}
table.paket-tablosu thead th { background: var(--renk-yuzey); font-weight: 700; }
table.paket-tablosu tbody th { font-weight: 600; color: var(--renk-soluk); }
.tablo-sarmal { overflow-x: auto; }

form.form-alani { display: grid; gap: 18px; }
form.form-alani label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; }
form.form-alani input, form.form-alani select, form.form-alani textarea {
    width: 100%; padding: 12px 14px; font: inherit; color: inherit;
    background: var(--renk-arka-plan);
    border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricapi);
}
.ipucu { font-size: 0.85rem; color: var(--renk-soluk); margin: 6px 0 0; }
.ipucu-uygun { color: var(--renk-basari); font-weight: 600; }
.ipucu-dolu { color: var(--renk-uyari); font-weight: 600; }

.bildirim { padding: 14px 16px; border-radius: var(--kose-yaricapi); margin-bottom: 20px; font-size: 0.95rem; }
.bildirim-hata { background: #fdecec; color: #8f1f1f; border: 1px solid #f5c6c6; }
.bildirim-basari { background: #e9f6ee; color: var(--renk-basari); border: 1px solid #bfe3ce; }
.bildirim-uyari { background: #fdf3e6; color: var(--renk-uyari); border: 1px solid #f2d9b8; }
.bildirim ul { margin: 8px 0 0; padding-left: 20px; }

.rozet {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; border: 1px solid var(--renk-kenarlik); color: var(--renk-soluk);
}
.rozet-yayinda { background: #e9f6ee; color: var(--renk-basari); border-color: #bfe3ce; }
.rozet-taslak { background: #fdf3e6; color: var(--renk-uyari); border-color: #f2d9b8; }

.alt-cubuk { padding: 32px 0; border-top: 1px solid var(--renk-kenarlik); color: var(--renk-soluk); font-size: 0.9rem; }

@media (max-width: 640px) {
    .bolum { padding: 52px 0; }
}