/* =====================================================================
   IŞIKLAR HOLDİNG A.Ş. - ETİK BİLDİRİM HATTI
   Ana stil dosyası

   İÇİNDEKİLER
     01  Değişkenler ve tema
     02  Sıfırlama ve temel tipografi
     03  Yerleşim (layout)
     04  Üst bilgi ve menü
     05  Alt bilgi
     06  Butonlar
     07  Kartlar ve kutular
     08  Form öğeleri
     09  Sihirbaz (çok adımlı form)
     10  Uyarı ve bildirim kutuları
     11  Rozetler ve etiketler
     12  Anasayfa bölümleri
     13  Bildirim kodu ekranı
     14  Ticket / yazışma görünümü
     15  S.S.S. akordiyon
     16  İçerik sayfaları
     17  Tablolar
     18  Yardımcı sınıflar
     19  Duyarlı tasarım (responsive)
     20  Yazdırma

   NOT: Hiçbir dış kaynak (Google Fonts, CDN vb.) kullanılmamaktadır.
   Bunun nedeni estetik değil gizliliktir: dış bir kaynak yüklenseydi
   ihbarcının IP adresi o üçüncü taraf sunucuya iletilmiş olurdu.
   ===================================================================== */


/* =====================================================================
   01  DEĞİŞKENLER VE TEMA
   Renkler ve köşe yuvarlaklığı Etik Panel > Ayarlar > Görünüm
   bölümünden değiştirilir ve sayfa başında satır içi olarak basılır.
   ===================================================================== */
:root {
    /* Panelden gelen değerler (varsayılanlar) */
    --primary:        #0F3057;
    --primary-dark:   #0A2340;
    --accent:         #1E88A8;
    --surface:        #F5F7FA;
    --radius:         12px;

    /* Türetilen değerler */
    --primary-soft:   color-mix(in srgb, var(--primary) 8%, white);
    --accent-soft:    color-mix(in srgb, var(--accent) 10%, white);

    /* Nötr renk skalası */
    --white:          #FFFFFF;
    --gray-50:        #F8FAFC;
    --gray-100:       #F1F5F9;
    --gray-200:       #E2E8F0;
    --gray-300:       #CBD5E1;
    --gray-400:       #94A3B8;
    --gray-500:       #64748B;
    --gray-600:       #475569;
    --gray-700:       #334155;
    --gray-800:       #1E293B;
    --gray-900:       #0F172A;

    /* Durum renkleri */
    --success:        #059669;
    --success-bg:     #ECFDF5;
    --warning:        #D97706;
    --warning-bg:     #FFFBEB;
    --danger:         #DC2626;
    --danger-bg:      #FEF2F2;
    --info:           #2563EB;
    --info-bg:        #EFF6FF;

    /* Tipografi: sistem yazı tipleri — dış kaynak yüklenmez */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", "Noto Sans", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                 Consolas, "Liberation Mono", monospace;

    /* Gölgeler */
    --shadow-sm:  0 1px 2px rgba(15, 23, 42, .06);
    --shadow:     0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md:  0 4px 12px rgba(15, 23, 42, .08);
    --shadow-lg:  0 12px 32px rgba(15, 23, 42, .12);

    /* Ölçüler */
    --container:  1180px;
    --header-h:   72px;
}

/* color-mix desteklemeyen eski tarayıcılar için yedek */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --primary-soft: #EEF2F7;
        --accent-soft:  #E8F4F8;
    }
}


/* =====================================================================
   02  SIFIRLAMA VE TEMEL TİPOGRAFİ
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--gray-800);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5 {
    margin: 0 0 .6em;
    line-height: 1.3;
    font-weight: 650;
    color: var(--gray-900);
    letter-spacing: -.01em;
}

h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--accent);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover { color: var(--primary); text-decoration: underline; }

strong, b { font-weight: 650; }
small { font-size: .875em; }

ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin-bottom: .4em; }

hr {
    border: 0;
    border-top: 1px solid var(--gray-200);
    margin: 2rem 0;
}

code {
    font-family: var(--font-mono);
    font-size: .9em;
    background: var(--gray-100);
    padding: .15em .4em;
    border-radius: 4px;
}

img { max-width: 100%; height: auto; }

/* Klavye ile gezinenler için belirgin odak halkası (erişilebilirlik) */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* İkonlar */
.icon {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
    vertical-align: -.2em;
}
.icon-sm { width: 1em;    height: 1em; }
.icon-lg { width: 1.75em; height: 1.75em; }
.icon-xl { width: 2.5em;  height: 2.5em; }

/* Ekran okuyucular için gizli metin */
.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;
}

/* "İçeriğe atla" bağlantısı */
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: .75rem 1.25rem;
    background: var(--primary);
    color: #fff;
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
    left: 0; top: 0;
    color: #fff;
    text-decoration: none;
}


/* =====================================================================
   03  YERLEŞİM
   ===================================================================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}
.container-narrow { max-width: 860px; }
.container-tight  { max-width: 640px; }

.main {
    flex: 1 0 auto;
    padding: 40px 0 72px;
}

.section { margin-bottom: 56px; }
.section:last-child { margin-bottom: 0; }

.page-head {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gray-200);
}
.page-head h1 { margin-bottom: .35em; }
.page-head .lead {
    font-size: 1.05rem;
    color: var(--gray-600);
    margin: 0;
    max-width: 68ch;
}

/* Etik ve Uyum Politikaları sayfasında altyazı, diğer sayfalardaki
   gibi dar bir sütuna hapsedilmeden konteynerin tamamını kullanır
   (kullanıcı isteği: yalnızca bu sayfaya özel). */
.page-policies .page-head .lead { max-width: none; }

/* Aydınlatma Metni (KVKK) sayfası: altyazı genişlik sınırı kaldırılır,
   başlık çok uzun olduğu için küçültülür (kullanıcı isteği: yalnızca
   bu sayfaya özel — diğer politika sayfaları etkilenmez). */
.page-kvkk .page-head .lead { max-width: none; }
.page-kvkk .page-head h1 { font-size: 1.5rem; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.stack     { display: flex; flex-direction: column; gap: 16px; }
.stack-sm  { display: flex; flex-direction: column; gap: 8px;  }
.row       { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }


/* =====================================================================
   04  ÜST BİLGİ VE MENÜ
   ===================================================================== */
.site-header {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--header-h);
}

/* --- Logo --- */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--primary);
    text-decoration: none;
    flex: 0 0 auto;
    padding: 8px 0;
}
.brand:hover { text-decoration: none; }

.brand img {
    height: 44px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
}

.brand-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    background: var(--primary);
    color: #fff;
    border-radius: 10px;
    flex: 0 0 auto;
}
.brand-fallback .icon { width: 24px; height: 24px; }

.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary);
    letter-spacing: -.01em;
}
.brand-sub {
    font-size: .78rem;
    color: var(--gray-500);
    font-weight: 500;
}

/* --- Ana menü --- */
.nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--gray-600);
    font-weight: 550;
    font-size: .935rem;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.nav a:hover {
    background: var(--gray-100);
    color: var(--primary);
    text-decoration: none;
}
.nav a.is-active {
    background: var(--primary-soft);
    color: var(--primary);
}
.nav a .icon { width: 1.05em; height: 1.05em; opacity: .85; }

/* --- Mobil menü düğmesi --- */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    border-radius: 8px;
    color: var(--gray-700);
    cursor: pointer;
}
.nav-toggle:hover { background: var(--gray-50); }

/* --- Hızlı çıkış --- */
.quick-exit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: var(--danger);
    color: #fff !important;
    border: 0;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.quick-exit:hover { background: #B91C1C; text-decoration: none; }


/* =====================================================================
   05  ALT BİLGİ
   ===================================================================== */
.site-footer {
    flex-shrink: 0;
    background: var(--primary-dark);
    color: rgba(255, 255, 255, .72);
    padding: 44px 0 28px;
    font-size: .9rem;
    margin-top: auto;
}

.footer-title {
    color: #fff;
    font-size: .8rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 14px;
}

.site-footer a { color: rgba(255, 255, 255, .8); }
.site-footer a:hover { color: #fff; }

/* Üst satır: marka bloğu solda, iki eylem butonu sağda üst üste —
   kullanıcının kendi taslağına göre. */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

/* Marka bloğu: logo solda, başlık+açıklama sağında — ikisi aynı hizada
   başlar. Logo, ayrı bir ayar alanından (footer_logo_path) yüklenir;
   koyu zeminde okunabilir açık renkli bir dosya beklenir. */
.footer-brand {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
.footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: opacity .15s ease;
}
.footer-logo:hover { opacity: .8; text-decoration: none; }
.footer-logo img { display: block; height: 60px; width: auto; max-width: 210px; }
/* Görsel logo yoksa .brand-fallback rozeti zaten koyu zeminde de okunur */

/* Aydınlatma Metni ve Etik Panel butonları — sağ üstte, alt alta. */
.footer-top-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

/* Alt çizgi: yalnızca ortalanmış telif satırı. */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .13);
    padding-top: 18px;
    text-align: center;
    font-size: .84rem;
    color: rgba(255, 255, 255, .55);
}
.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    background: rgba(255, 255, 255, .09);
    border-radius: 100px;
    font-size: .8rem;
    color: rgba(255, 255, 255, .85);
}

/* Etik Panel girişi — üst menüden buraya taşındı (bkz. layouts/public.php).
   Sebep: yüklenen logonun gerçek genişliği üst menüyü taşırıp en sondaki
   öğeyi (Etik Panel) alt satıra düşürüyordu. Panel girişi ziyaretçi akışının
   günlük kullanılan bir parçası olmadığı için alt bilgide durması sorun
   yaratmaz ve üst menüyü her logo boyutunda güvenle sığdırır. */
.footer-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 100px;
    background: rgba(255, 255, 255, .07);
    font-size: .82rem;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease;
}
.site-footer .footer-panel-link { color: #fff; }
.site-footer .footer-panel-link:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
    text-decoration: none;
}


/* =====================================================================
   06  BUTONLAR
   ===================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease,
                transform .1s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--primary-dark); color: #fff; }

.btn-accent  { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #17708B; color: #fff; }

.btn-outline {
    background: var(--white);
    border-color: var(--gray-300);
    color: var(--gray-700);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--gray-50); }

.btn-ghost { background: transparent; color: var(--gray-600); }
.btn-ghost:hover { background: var(--gray-100); color: var(--primary); }

.btn-danger  { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #B91C1C; color: #fff; }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #047857; color: #fff; }

.btn-lg  { padding: 15px 30px; font-size: 1.03rem; border-radius: 10px; }
.btn-sm  { padding: 8px 14px;  font-size: .86rem;  border-radius: 7px; gap: 6px; }
.btn-xs  { padding: 5px 10px;  font-size: .8rem;   border-radius: 6px; gap: 5px; }
.btn-block { width: 100%; }

.btn-group { display: flex; gap: 12px; flex-wrap: wrap; }


/* =====================================================================
   07  KARTLAR VE KUTULAR
   ===================================================================== */
.card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card-pad  { padding: 28px; }
.card-pad-sm { padding: 18px; }

.card-head {
    padding: 20px 28px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.card-head h2, .card-head h3 { margin: 0; font-size: 1.08rem; }

.card-body { padding: 28px; }
.card-foot {
    padding: 18px 28px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Tıklanabilir kart */
.card-link {
    display: block;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card-link:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transform: translateY(-2px);
}


/* =====================================================================
   08  FORM ÖĞELERİ
   ===================================================================== */
.field { margin-bottom: 26px; }
.field:last-child { margin-bottom: 0; }

.label {
    display: block;
    font-weight: 600;
    font-size: .96rem;
    color: var(--gray-800);
    margin-bottom: 7px;
    line-height: 1.45;
}
.label .req { color: var(--danger); margin-left: 3px; font-weight: 700; }
.label .opt { color: var(--gray-400); font-weight: 450; font-size: .88em; margin-left: 5px; }

.help {
    font-size: .875rem;
    color: var(--gray-500);
    margin: 0 0 10px;
    line-height: 1.55;
}
.help-after { margin: 7px 0 0; }

.input, .textarea, .select {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--gray-900);
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: 9px;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--gray-400); }

.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(30, 136, 168, .15);
}

.input::placeholder, .textarea::placeholder { color: var(--gray-400); }

.textarea { min-height: 130px; resize: vertical; }
.textarea-lg { min-height: 220px; }

.select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 42px;
    cursor: pointer;
}

.input-code {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    letter-spacing: .35em;
    text-align: center;
    text-transform: uppercase;
    padding: 16px 14px;
    font-weight: 600;
}

.input.is-error, .textarea.is-error, .select.is-error {
    border-color: var(--danger);
    background: var(--danger-bg);
}

/* --- Seçim grupları (radio / checkbox) --- */
.choice-group { display: flex; flex-direction: column; gap: 10px; }
.choice-group-inline { flex-direction: row; flex-wrap: wrap; gap: 12px; }

.choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.choice:hover { border-color: var(--accent); background: var(--gray-50); }

.choice input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.choice-text { flex: 1; min-width: 0; }
.choice-title { font-weight: 550; color: var(--gray-800); display: block; }
.choice-desc  { font-size: .86rem; color: var(--gray-500); display: block; margin-top: 2px; }

.choice:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent);
}

.choice-inline { flex: 0 1 auto; min-width: 140px; }

/* --- Kategori listesi (tek sütun, alt alta satırlar) --- */
.category-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.category-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    background: var(--white);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.category-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.category-card input { position: absolute; opacity: 0; width: 0; height: 0; }

.category-card:has(input:checked) {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
    background: var(--accent-soft);
}

.category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--gray-100);
    color: var(--cat-color, var(--primary));
}
.category-card:has(input:checked) .category-icon { background: #fff; }

.category-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.category-name { font-weight: 650; color: var(--gray-900); line-height: 1.35; }
.category-desc { font-size: .85rem; color: var(--gray-500); line-height: 1.5; }

.category-check {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--accent);
    opacity: 0;
    transition: opacity .15s ease;
}
.category-card:has(input:checked) .category-check { opacity: 1; }

/* --- Kişi satırları (davranışta bulunanlar) --- */
.person-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: start;
    margin-bottom: 10px;
}
.person-row .btn-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 46px;
    border: 1px solid var(--gray-300);
    background: var(--white);
    border-radius: 9px;
    color: var(--gray-500);
    cursor: pointer;
}
.person-row .btn-remove:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }

/* --- Dosya yükleme --- */
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 34px 24px;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius);
    background: var(--gray-50);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone.is-over {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.dropzone-icon { color: var(--accent); }
.dropzone-title { font-weight: 600; color: var(--gray-800); }
.dropzone-hint  { font-size: .85rem; color: var(--gray-500); max-width: 52ch; }

.file-list { list-style: none; padding: 0; margin: 14px 0 0; }
.file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 9px;
    margin-bottom: 8px;
    font-size: .9rem;
}
.file-item .icon { color: var(--accent); }
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.file-size { color: var(--gray-500); font-size: .85rem; flex: 0 0 auto; }
.file-item.is-invalid { border-color: var(--danger); background: var(--danger-bg); }

/* --- Onay kutusu (aydınlatma metni) --- */
.consent-box {
    max-height: 420px;
    overflow-y: auto;
    padding: 24px 26px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--gray-50);
    font-size: .93rem;
    line-height: 1.7;
}
.consent-box h3 {
    font-size: 1rem;
    margin-top: 1.5em;
    color: var(--primary);
}
.consent-box h3:first-child { margin-top: 0; }
.consent-box ul { padding-left: 1.3em; }

.consent-check {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 18px 20px;
    margin-top: 18px;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius);
    background: var(--white);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.consent-check:hover { border-color: var(--accent); }
.consent-check:has(input:checked) { border-color: var(--success); background: var(--success-bg); }
.consent-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--success); cursor: pointer; flex: 0 0 auto; }
.consent-check span { font-weight: 550; line-height: 1.55; }

/* Karakter sayacı */
.char-counter {
    text-align: right;
    font-size: .8rem;
    color: var(--gray-400);
    margin-top: 5px;
}
.char-counter.is-near { color: var(--warning); }
.char-counter.is-over { color: var(--danger); font-weight: 600; }


/* =====================================================================
   09  SİHİRBAZ (ÇOK ADIMLI FORM)
   JavaScript kapalıysa tüm adımlar görünür kalır ve form yine çalışır.
   ===================================================================== */
.wizard { position: relative; }

/* Adım göstergesi */
.steps {
    display: flex;
    gap: 6px;
    margin-bottom: 34px;
    list-style: none;
    padding: 0;
    counter-reset: step;
}
.step-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
}
.step-bar {
    height: 5px;
    background: var(--gray-200);
    border-radius: 3px;
    transition: background .3s ease;
}
.step-item.is-done .step-bar    { background: var(--success); }
.step-item.is-current .step-bar { background: var(--accent); }

.step-label {
    font-size: .79rem;
    font-weight: 600;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}
.step-item.is-current .step-label { color: var(--accent); }
.step-item.is-done .step-label    { color: var(--success); }

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-500);
    font-size: .7rem;
    font-weight: 700;
    flex: 0 0 auto;
}
.step-item.is-current .step-num { background: var(--accent); color: #fff; }
.step-item.is-done .step-num    { background: var(--success); color: #fff; }

/* Adım panelleri */
.wizard-step { display: block; }
.js-on .wizard-step { display: none; }
.js-on .wizard-step.is-active { display: block; animation: stepIn .25s ease; }

@keyframes stepIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.step-header {
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--gray-200);
}
.step-header h2 { margin-bottom: .25em; font-size: 1.35rem; }
.step-header p  { color: var(--gray-500); margin: 0; font-size: .95rem; }

.wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}
.wizard-nav .spacer { flex: 1; }

/* JavaScript kapalıyken gösterilen bilgi */
.noscript-note { display: block; }
.js-on .noscript-note { display: none; }


/* =====================================================================
   10  UYARI VE BİLDİRİM KUTULARI
   ===================================================================== */
.alert {
    display: flex;
    gap: 13px;
    padding: 16px 18px;
    border-radius: 10px;
    border: 1px solid;
    margin-bottom: 20px;
    font-size: .94rem;
    line-height: 1.6;
}
.alert:last-child { margin-bottom: 0; }
.alert .icon { flex: 0 0 auto; margin-top: 2px; }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-weight: 650; display: block; margin-bottom: 3px; }
.alert p:last-child { margin-bottom: 0; }
.alert ul { margin: 6px 0 0; padding-left: 1.3em; }
.alert li { margin-bottom: .3em; }

.alert-info    { background: var(--info-bg);    border-color: #BFDBFE; color: #1E40AF; }
.alert-success { background: var(--success-bg); border-color: #A7F3D0; color: #065F46; }
.alert-warning { background: var(--warning-bg); border-color: #FDE68A; color: #92400E; }
.alert-danger  { background: var(--danger-bg);  border-color: #FECACA; color: #991B1B; }
.alert-neutral { background: var(--gray-50);    border-color: var(--gray-200); color: var(--gray-700); }

.alert-info .icon    { color: var(--info); }
.alert-success .icon { color: var(--success); }
.alert-warning .icon { color: var(--warning); }
.alert-danger .icon  { color: var(--danger); }

/* Vurgulu bilgi kutusu (form içi uyarılar) */
.notice {
    padding: 16px 18px;
    background: var(--primary-soft);
    border-left: 4px solid var(--primary);
    border-radius: 0 9px 9px 0;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--gray-700);
    margin-bottom: 20px;
}
.notice strong { color: var(--primary); }


/* =====================================================================
   11  ROZETLER VE ETİKETLER
   ===================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.badge .icon { width: .95em; height: .95em; }

.badge-gray    { background: var(--gray-100);   color: var(--gray-600); }
.badge-primary { background: var(--primary-soft); color: var(--primary); }
.badge-success { background: var(--success-bg); color: #065F46; }
.badge-warning { background: var(--warning-bg); color: #92400E; }
.badge-danger  { background: var(--danger-bg);  color: #991B1B; }
.badge-info    { background: var(--info-bg);    color: #1E40AF; }

/* Renk panelden geldiğinde satır içi stil ile boyanır */
.badge-dot::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

/* =====================================================================
   12  ANASAYFA BÖLÜMLERİ
   ===================================================================== */
.hero {
    background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    padding: 72px 0 80px;
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: '';
    position: absolute;
    top: -40%; right: -10%;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Diğer bölümlerle (taahhüt, özellikler, süreç) aynı genişliği kullanır;
   yapay bir dar sütuna hapsedilmez — konteynerin tamamına yayılır. */
.hero-inner { position: relative; z-index: 1; }
.hero h1 { color: #fff; margin-bottom: .4em; }
.hero-sub {
    font-size: 1.12rem;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 32px;
    max-width: 920px;   /* çok geniş ekranlarda satırın okunaksız uzamasını önler */
    line-height: 1.7;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .btn-primary { background: #fff; color: var(--primary); }
.hero .btn-primary:hover { background: var(--gray-100); color: var(--primary-dark); }
.hero .btn-outline {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}
.hero .btn-outline:hover {
    background: rgba(255, 255, 255, .18);
    border-color: #fff;
    color: #fff;
}

.hero-badges {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}
.hero-badge {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .89rem;
    color: rgba(255, 255, 255, .8);
}
.hero-badge .icon { color: rgba(255, 255, 255, .95); }

/* Taahhüt bölümü */
.pledge {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 40px;
    box-shadow: var(--shadow);
}
.pledge-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
    margin-bottom: 14px;
}
/* Kartın tamamını kullanır; sağda boş alan bırakan dar bir sütuna
   hapsedilmez (bkz. kullanıcı geri bildirimi: kutunun sağ yarısı boş
   kalıyordu). */
.pledge-text { font-size: 1.04rem; color: var(--gray-600); line-height: 1.8; }

/* Özellik kartları (7/24, Bağımsız, Gizli) */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.feature {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 28px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.feature:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 13px;
    background: var(--accent-soft);
    color: var(--accent);
    margin-bottom: 18px;
}
.feature h3 { font-size: 1.12rem; margin-bottom: .45em; }
.feature p  { color: var(--gray-600); font-size: .93rem; line-height: 1.7; margin: 0; }

/* Süreç adımları */
.process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    counter-reset: proc;
}
.process-item {
    position: relative;
    padding: 24px 20px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
}
.process-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    margin-bottom: 13px;
}
.process-item h4 { font-size: 1rem; margin-bottom: .35em; }
.process-item p  { font-size: .88rem; color: var(--gray-500); margin: 0; line-height: 1.6; }

/* Alt çağrı bölümü */
/* =====================================================================
   13  BİLDİRİM KODU EKRANI
   ===================================================================== */
.result-card {
    text-align: center;
    padding: 48px 40px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px; height: 76px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    margin-bottom: 22px;
}

.code-box {
    margin: 30px 0;
    padding: 30px 24px;
    background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius);
    color: #fff;
}
.code-label {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 12px;
    font-weight: 600;
}
.code-value {
    font-family: var(--font-mono);
    font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
    font-weight: 700;
    letter-spacing: .22em;
    line-height: 1.2;
    word-break: break-all;
    text-indent: .22em; /* letter-spacing'in sağdaki boşluğunu dengeler */
}
.code-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}
.code-actions .btn {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}
.code-actions .btn:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.result-ref {
    font-size: .88rem;
    color: var(--gray-500);
    margin-top: -12px;
    margin-bottom: 24px;
}


/* =====================================================================
   14  TICKET / YAZIŞMA GÖRÜNÜMÜ
   ===================================================================== */
.ticket-head {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-bottom: 24px;
}
.ticket-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ticket-ref {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
}

.ticket-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--gray-200);
}
.meta-item { min-width: 0; }
.meta-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gray-400);
    font-weight: 650;
    margin-bottom: 3px;
}
.meta-value { font-size: .94rem; color: var(--gray-800); font-weight: 500; word-break: break-word; }

/* Mesaj akışı */
.thread { display: flex; flex-direction: column; gap: 18px; }

.message {
    display: flex;
    gap: 14px;
    max-width: 88%;
}
.message-officer { align-self: flex-start; }
.message-reporter { align-self: flex-end; flex-direction: row-reverse; }
.message-system { align-self: center; max-width: 100%; }

.message-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    flex: 0 0 auto;
    font-weight: 700;
    font-size: .85rem;
}
.message-officer  .message-avatar { background: var(--primary-soft); color: var(--primary); }
.message-reporter .message-avatar { background: var(--accent-soft);  color: var(--accent); }

.message-bubble {
    padding: 15px 18px;
    border-radius: var(--radius);
    background: var(--white);
    border: 1px solid var(--gray-200);
    min-width: 0;
}
.message-reporter .message-bubble { background: var(--accent-soft); border-color: transparent; }
.message-internal .message-bubble {
    background: var(--warning-bg);
    border-color: #FDE68A;
    border-style: dashed;
}

.message-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
    font-size: .82rem;
    flex-wrap: wrap;
}
.message-author { font-weight: 650; color: var(--gray-800); }
.message-time   { color: var(--gray-400); }

.message-body {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--gray-700);
}

.message-system .message-bubble {
    background: var(--gray-100);
    border: 0;
    text-align: center;
    font-size: .85rem;
    color: var(--gray-500);
    padding: 9px 16px;
    border-radius: 100px;
}

/* Yanıt kutusu */
.reply-box {
    margin-top: 28px;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
}

/* Ek dosya listesi */
.attachments {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 11px;
}
.attachment {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--gray-200);
    border-radius: 9px;
    background: var(--white);
    color: var(--gray-700);
    font-size: .88rem;
    transition: border-color .15s ease, background .15s ease;
}
.attachment:hover { border-color: var(--accent); background: var(--gray-50); text-decoration: none; }
.attachment .icon { color: var(--accent); flex: 0 0 auto; }
.attachment-info { flex: 1; min-width: 0; }
.attachment-name {
    display: block;
    font-weight: 550;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gray-800);
}
.attachment-meta { display: block; font-size: .78rem; color: var(--gray-400); }


/* =====================================================================
   15  S.S.S. AKORDİYON
   ===================================================================== */

.faq-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
    margin-bottom: 10px;
    overflow: hidden;
}
.faq-item[open] { border-color: var(--accent); box-shadow: var(--shadow); }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    font-weight: 600;
    color: var(--gray-800);
    cursor: pointer;
    list-style: none;
    transition: background .15s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { background: var(--gray-50); }
.faq-q .icon { color: var(--gray-400); transition: transform .2s ease; flex: 0 0 auto; }
.faq-item[open] .faq-q { color: var(--primary); }
.faq-item[open] .faq-q .icon { transform: rotate(180deg); color: var(--accent); }

.faq-a {
    padding: 0 22px 20px;
    color: var(--gray-600);
    font-size: .94rem;
    line-height: 1.75;
    border-top: 1px solid var(--gray-100);
    padding-top: 16px;
}
.faq-a p:last-child { margin-bottom: 0; }


/* =====================================================================
   16  İÇERİK SAYFALARI
   ===================================================================== */
.prose { font-size: 1rem; line-height: 1.8; color: var(--gray-700); max-width: 76ch; }
.prose h2 { margin-top: 2em; font-size: 1.4rem; }
.prose h3 { margin-top: 1.8em; font-size: 1.15rem; color: var(--primary); }
.prose h4 { margin-top: 1.5em; font-size: 1.02rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin-bottom: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose blockquote {
    margin: 1.5em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--accent);
    color: var(--gray-600);
    font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .93rem; }
.prose th, .prose td { padding: 10px 14px; border: 1px solid var(--gray-200); text-align: left; }
.prose th { background: var(--gray-50); font-weight: 650; }

.policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.policy-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.policy-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.policy-card-icon {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px;
    border-radius: 11px;
    background: var(--accent-soft);
    color: var(--accent);
}
.policy-card h3 { font-size: 1.06rem; margin: 0; }
.policy-card p  { font-size: .89rem; color: var(--gray-500); margin: 0; line-height: 1.65; flex: 1; }
.policy-card .more { font-size: .87rem; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 5px; }

/* Etik ve Uyum Politikaları listeleme sayfası (/politikalar): tek
   sütun, satır genişliğinde yatay kartlar. Bir politika sayfasının
   altındaki "Diğer politikalar" küçük kutucuğu (page.php) bu sayfa
   sınıfı içinde OLMADIĞI için etkilenmez, orijinal ızgara görünümünü
   korur. */
.page-policies .policy-grid { grid-template-columns: 1fr; }
.page-policies .policy-card {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 22px 28px;
}
.page-policies .policy-card-icon { flex: 0 0 auto; }
.page-policies .policy-card-body { flex: 1; min-width: 0; }
.page-policies .policy-card .more { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 620px) {
    .page-policies .policy-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

.toc {
    padding: 20px 24px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    margin-bottom: 32px;
}
.toc-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gray-500); font-weight: 700; margin-bottom: 10px; }


/* =====================================================================
   17  TABLOLAR
   ===================================================================== */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
    -webkit-overflow-scrolling: touch;
}

.table { width: 100%; border-collapse: collapse; font-size: .92rem; }

.table th {
    padding: 13px 16px;
    text-align: left;
    font-weight: 650;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gray-500);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}
.table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--gray-50); }

.table-row-link { cursor: pointer; }
.table-row-unread { background: var(--info-bg) !important; }
.table-row-unread:hover { background: #DBEAFE !important; }

.table-empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--gray-500);
}
.table-empty .icon { color: var(--gray-300); margin-bottom: 14px; }


/* =====================================================================
   18  YARDIMCI SINIFLAR
   ===================================================================== */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--gray-500); }
.text-small  { font-size: .87rem; }
.text-danger { color: var(--danger); }
.text-success{ color: var(--success); }
.text-mono   { font-family: var(--font-mono); }
.text-nowrap { white-space: nowrap; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.hidden { display: none !important; }
.flex-1 { flex: 1; }

.divider { height: 1px; background: var(--gray-200); margin: 24px 0; }


/* =====================================================================
   19  DUYARLI TASARIM
   ===================================================================== */
@media (max-width: 1024px) {
    .process     { grid-template-columns: repeat(2, 1fr); }
    .grid-4      { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .features { grid-template-columns: 1fr; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }

    /* Mobil menü */
    .nav-toggle { display: inline-flex; }

    .nav {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 12px;
        background: var(--white);
        border-top: 1px solid var(--gray-200);
        border-bottom: 1px solid var(--gray-200);
        box-shadow: var(--shadow-lg);
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
    }
    .nav.is-open { display: flex; }
    .nav a { padding: 13px 16px; font-size: 1rem; }

    .site-header { position: relative; }
    .header-inner { position: relative; }

    .hero { padding: 52px 0 58px; }
    .hero-actions .btn { flex: 1 1 auto; justify-content: center; }

    .pledge { padding: 28px 24px; }
    .person-row { grid-template-columns: 1fr; gap: 8px; }
    .person-row .btn-remove { width: 100%; height: 42px; }

    .message { max-width: 100%; }

    .card-pad, .card-body { padding: 22px 20px; }
    .card-head, .card-foot { padding: 16px 20px; }

    .result-card { padding: 34px 22px; }
}

@media (max-width: 620px) {
    body { font-size: 15.5px; }
    .container { padding: 0 16px; }
    .main { padding: 28px 0 52px; }

    .brand img { height: 36px; max-width: 150px; }
    .brand-sub { display: none; }

    /* Adım göstergesi: mobilde sadece çubuklar */
    .step-label { display: none; }
    .steps { gap: 4px; margin-bottom: 24px; }

    .wizard-nav { flex-direction: column-reverse; }
    .wizard-nav .btn { width: 100%; }
    .wizard-nav .spacer { display: none; }

    .btn-group { flex-direction: column; }
    .btn-group .btn { width: 100%; }

    .code-value { letter-spacing: .12em; text-indent: .12em; }

    .footer-top { flex-direction: column; margin-bottom: 18px; }
    .footer-brand { flex-direction: column; align-items: flex-start; gap: 14px; }
    .footer-top-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
    .process, .grid-4 { grid-template-columns: 1fr; }

    .attachments { grid-template-columns: 1fr; }

    .quick-exit span { display: none; }
    .quick-exit { padding: 8px 10px; }
}


/* =====================================================================
   20  YAZDIRMA
   ===================================================================== */
@media print {
    .site-header, .site-footer, .quick-exit, .no-print,
    .wizard-nav, .btn, .reply-box, .nav-toggle { display: none !important; }

    body { background: #fff; color: #000; font-size: 12pt; }
    .main { padding: 0; }
    .container { max-width: 100%; padding: 0; }

    .card, .result-card, .ticket-head, .message-bubble {
        border: 1px solid #999 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .code-box {
        background: #fff !important;
        color: #000 !important;
        border: 2px solid #000 !important;
    }
    .code-label { color: #555 !important; }

    a[href]::after { content: ""; }
}