/* ==========================================================================
   ZİYARETÇİ SİTESİ STİLLERİ
   Renk, yazı tipi, genişlik ve köşe değerleri yönetim panelinden gelir
   (pages/parcalar/ust.php içinde :root değişkenleri olarak basılır).
   Koyu tema varsayılandır; [data-tema="acik"] açık temayı uygular.
   ========================================================================== */

:root {
    --ana: #8b5cf6;
    --ikincil: #06b6d4;
    --vurgu: #f59e0b;
    --pembe: #ec4899;
    --yesil: #10b981;
    --kirmizi: #ef4444;
    --genislik: 1320px;
    --yazi: 'Plus Jakarta Sans', system-ui, sans-serif;
    --baslik-yazi: 'Outfit', system-ui, sans-serif;
    --kod-yazi: 'Fira Code', monospace;
    --radius: 18px;
    --buton-radius: 40px;

    --zemin: #080911;
    --zemin-2: #0d0f1c;
    --kart: rgba(18, 20, 38, 0.72);
    --kart-dolu: #12142a;
    --cizgi: rgba(255, 255, 255, 0.08);
    --cizgi-2: rgba(255, 255, 255, 0.14);
    --metin: #f3f4f6;
    --metin-soluk: #9ca3af;
    --metin-koyu: #6b7280;
    --girdi: rgba(0, 0, 0, 0.35);
    --golge: 0 20px 50px rgba(0, 0, 0, 0.45);
    --gecis: all .25s cubic-bezier(.4, 0, .2, 1);
    --sutun-d: 4;
    --sutun-t: 2;
    --sutun-m: 1;
    --gorsel-oran: 16/10;
}

[data-tema="acik"] {
    --zemin: #f5f6fb;
    --zemin-2: #ffffff;
    --kart: rgba(255, 255, 255, 0.9);
    --kart-dolu: #ffffff;
    --cizgi: rgba(15, 23, 42, 0.08);
    --cizgi-2: rgba(15, 23, 42, 0.16);
    --metin: #111827;
    --metin-soluk: #4b5563;
    --metin-koyu: #6b7280;
    --girdi: #ffffff;
    --golge: 0 14px 40px rgba(15, 23, 42, 0.10);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--yazi);
    font-size: var(--yazi-boyutu, 16px);
    background: var(--zemin);
    color: var(--metin);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}
::selection { background: var(--ana); color: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ana); }
h1, h2, h3, h4, h5 { font-family: var(--baslik-yazi); font-weight: var(--baslik-kalinlik, 800); line-height: 1.2; margin: 0 0 .6em; letter-spacing: -.3px; }
p { margin: 0 0 1em; }
code, pre { font-family: var(--kod-yazi); }
.gizli { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Arka plan efektleri ---------- */
#parcacik-tuval, #mevsim-tuval { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
#mevsim-tuval { z-index: 5; }
.ortam-isik { position: fixed; border-radius: 50%; filter: blur(120px); z-index: 0; pointer-events: none; opacity: .45; animation: isikYuzer 16s infinite alternate ease-in-out; }
.ortam-isik.i1 { width: 520px; height: 520px; background: radial-gradient(circle, var(--ana) 0%, transparent 70%); top: -140px; left: -140px; }
.ortam-isik.i2 { width: 600px; height: 600px; background: radial-gradient(circle, var(--ikincil) 0%, transparent 70%); bottom: -200px; right: -160px; animation-delay: -6s; }
[data-tema="acik"] .ortam-isik { opacity: .18; }
@keyframes isikYuzer { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 60px) scale(1.12); } }
.sayfa-sarici { position: relative; z-index: 2; }

.kap { max-width: var(--genislik); margin: 0 auto; padding: 0 20px; }

/* ---------- Üst bilgi barı ---------- */
.ust-bilgi { background: var(--zemin-2); border-bottom: 1px solid var(--cizgi); font-size: .8rem; color: var(--metin-soluk); position: relative; z-index: 30; }
.ust-bilgi .kap { position: relative; display: flex; justify-content: center; align-items: center; min-height: 36px; }
.ust-bilgi-pencere { overflow: hidden; max-width: 100%; }
.ust-bilgi ul { display: flex; justify-content: center; gap: 26px; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.ust-bilgi li.kopya { display: none; }
.ust-bilgi li i { color: var(--ikincil); margin-right: 6px; }
.ust-bilgi .sag { position: absolute; right: 20px; top: 0; bottom: 0; display: flex; gap: 14px; align-items: center; }
.ust-bilgi .sag a:hover, .ust-bilgi .sag a.aktif-dil { color: var(--ana); }
.ust-bilgi .sag a.aktif-dil { font-weight: 700; }

/* ---------- Kampanya barı ---------- */
.kampanya-bari { position: relative; overflow: hidden; background: linear-gradient(90deg, var(--ana), var(--pembe)); color: #fff; font-size: .88rem; font-weight: 600; z-index: 29; }
.kampanya-bari .serit { display: flex; gap: 60px; white-space: nowrap; padding: 8px 0; animation: kaydir var(--kampanya-hiz, 35s) linear infinite; width: max-content; }
@media (hover: hover) { .kampanya-bari:hover .serit, .ust-bilgi-pencere:hover .ust-bilgi-serit { animation-play-state: paused; } }
.kampanya-bari .serit a, .kampanya-bari .serit span { display: inline-flex; align-items: center; gap: 8px; }
.kampanya-bari.donusumlu .serit { animation: none; width: 100%; justify-content: center; position: relative; min-height: 38px; }
.kampanya-bari.donusumlu .mesaj { position: absolute; left: 0; right: 0; text-align: center; opacity: 0; transition: opacity .5s; padding: 8px 12px; white-space: normal; }
.kampanya-bari.donusumlu .mesaj.aktif { opacity: 1; }
@keyframes kaydir { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Ana menü (logo ortada) ---------- */
.ana-baslik { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--zemin) 82%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--cizgi); }
.ana-baslik .kap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 78px; gap: 20px; }
.menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu.sol { justify-content: flex-end; }
.menu.sag { justify-content: flex-start; }
.menu > li { position: relative; }
.menu > li > a { display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: .92rem; color: var(--metin); transition: var(--gecis); }
.menu > li > a:hover, .menu > li.aktif > a { background: rgba(139, 92, 246, .12); color: var(--ana); }
.menu .alt-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--kart-dolu); border: 1px solid var(--cizgi-2); border-radius: 14px; padding: 8px; list-style: none; margin: 0;
    box-shadow: var(--golge); opacity: 0; visibility: hidden; transform: translateY(6px); transition: var(--gecis); z-index: 50; }
.menu > li:hover > .alt-menu, .menu > li:focus-within > .alt-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.menu .alt-menu a { display: block; padding: 9px 12px; border-radius: 9px; font-size: .9rem; color: var(--metin-soluk); }
.menu .alt-menu a:hover { background: rgba(139, 92, 246, .12); color: var(--metin); }
.logo { display: flex; justify-content: center; align-items: center; }
.logo img { max-height: var(--logo-yukseklik, 52px); height: var(--logo-yukseklik, 44px); width: auto; }
.logo .metin-logo { font-family: var(--baslik-yazi); font-size: 1.6rem; font-weight: 800; letter-spacing: -.5px; }
.logo .metin-logo span { background: linear-gradient(90deg, var(--ikincil), var(--ana)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sag-grup { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ikon-menu { display: flex; align-items: center; gap: 6px; }
.dil-secici { position: relative; }
.dil-secici .dil-kod { font-weight: 800; font-size: .78rem; letter-spacing: .5px; }
.dil-secici .alt-menu { position: absolute; top: calc(100% + 6px); right: 0; left: auto; min-width: 170px; background: var(--kart-dolu); border: 1px solid var(--cizgi-2); border-radius: 14px; padding: 8px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: var(--gecis); z-index: 50; }
.dil-secici:hover .alt-menu, .dil-secici:focus-within .alt-menu { opacity: 1; visibility: visible; transform: none; }
.dil-secici .alt-menu a { display: block; padding: 9px 12px; border-radius: 9px; font-size: .9rem; color: var(--metin-soluk); }
.dil-secici .alt-menu a:hover, .dil-secici .alt-menu a.secili { background: rgba(139, 92, 246, .12); color: var(--metin); }
.ikon-dugme { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--cizgi); background: transparent; color: var(--metin); cursor: pointer; transition: var(--gecis); font-size: 1rem; }
.ikon-dugme:hover { border-color: var(--ana); color: var(--ana); }
.ikon-dugme .sayac { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--pembe); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.hamburger { display: none; }

/* Mobil menü (yan panel) */
.mobil-menu { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.mobil-menu.acik { visibility: visible; }
.mobil-menu .perde { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .3s; }
.mobil-menu.acik .perde { opacity: 1; }
.mobil-menu .panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(340px, 86vw); background: var(--kart-dolu); border-right: 1px solid var(--cizgi); padding: 20px; overflow-y: auto; transform: translateX(-100%); transition: transform .3s; }
.mobil-menu.tam .panel { width: 100vw; }
.mobil-menu.acik .panel { transform: none; }
.mobil-menu ul { list-style: none; padding: 0; margin: 0; }
.mobil-menu li a { display: block; padding: 12px 8px; border-bottom: 1px solid var(--cizgi); font-weight: 600; }
.mobil-menu li ul a { padding-left: 24px; font-weight: 400; color: var(--metin-soluk); }
.mobil-menu .kapat { float: right; }

/* ---------- Genel bileşenler ---------- */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--buton-radius); border: 0; cursor: pointer; font-family: var(--baslik-yazi); font-weight: 700; font-size: .95rem;
    background: linear-gradient(135deg, var(--ana), var(--pembe)); color: #fff; box-shadow: 0 6px 20px rgba(139, 92, 246, .35); transition: var(--gecis); text-align: center; line-height: 1.2; }
.dugme:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 10px 30px rgba(236, 72, 153, .4); }
.dugme:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.dugme.ikincil { background: transparent; border: 1px solid var(--cizgi-2); color: var(--metin); box-shadow: none; }
.dugme.ikincil:hover { border-color: var(--ana); color: var(--ana); }
.dugme.yesil { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 6px 20px rgba(16, 185, 129, .3); }
.dugme.tehlike { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: none; }
.dugme.kucuk { padding: 8px 14px; font-size: .85rem; }
.dugme.blok { width: 100%; }
.dugme-link { background: none; border: 0; color: var(--ana); cursor: pointer; font: inherit; padding: 0; }

.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 24px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bolum { padding-block: 56px; position: relative; }
.bolum.sikisik { padding-block: 32px; }
.bolum-baslik { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.bolum-baslik h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0; }
.bolum-baslik p { margin: 4px 0 0; color: var(--metin-soluk); }
.bolum-baslik .etiket-ust { color: var(--ikincil); font-weight: 700; font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase; }
.gradyan-metin { background: linear-gradient(135deg, var(--metin) 10%, var(--ana) 55%, var(--ikincil) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.rozet { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: .74rem; font-weight: 700; line-height: 1.5; }
.rozet-yesil { background: rgba(16, 185, 129, .15); color: #10b981; }
.rozet-sari { background: rgba(245, 158, 11, .15); color: #f59e0b; }
.rozet-kirmizi { background: rgba(239, 68, 68, .15); color: #ef4444; }
.rozet-mavi { background: rgba(6, 182, 212, .15); color: #06b6d4; }
.rozet-mor { background: rgba(139, 92, 246, .18); color: #a78bfa; }

.uyari { padding: 13px 16px; border-radius: 12px; margin-bottom: 16px; font-size: .93rem; border: 1px solid; }
.uyari-basari { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .4); color: #10b981; }
.uyari-hata { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .4); color: #f87171; }
.uyari-uyari { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .4); color: #f59e0b; }
.uyari-bilgi { background: rgba(6, 182, 212, .1); border-color: rgba(6, 182, 212, .4); color: #22d3ee; }
[data-tema="acik"] .uyari-basari { color: #047857; } [data-tema="acik"] .uyari-hata { color: #b91c1c; } [data-tema="acik"] .uyari-uyari { color: #b45309; } [data-tema="acik"] .uyari-bilgi { color: #0e7490; }

/* ---------- Formlar ---------- */
.form-alan { margin-bottom: 16px; }
.form-alan label, .etiket { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.form-alan small, .ipucu { display: block; color: var(--metin-koyu); font-size: .8rem; margin-top: 4px; }
.girdi, .form-alan input:not([type=checkbox]):not([type=radio]):not([type=file]), .form-alan select, .form-alan textarea {
    width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--cizgi-2); background: var(--girdi); color: var(--metin); font: inherit; font-size: .95rem; transition: var(--gecis); }
.form-alan input:focus, .form-alan select:focus, .form-alan textarea:focus, .girdi:focus { outline: none; border-color: var(--ana); box-shadow: 0 0 0 3px rgba(139, 92, 246, .2); }
.form-alan textarea { min-height: 120px; resize: vertical; }
.form-alan select option { background: var(--kart-dolu); color: var(--metin); }
.form-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; }
.form-izgara .tam { grid-column: 1 / -1; }
.onay-kutu { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; margin-bottom: 12px; cursor: pointer; }
.onay-kutu input { margin-top: 4px; accent-color: var(--ana); width: 17px; height: 17px; flex: none; }
.zorunlu::after { content: " *"; color: var(--kirmizi); }

/* ---------- Tablolar ---------- */
.tablo-sarici { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: 14px; }
.tablo { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tablo th, .tablo td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo th { font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--metin-soluk); background: rgba(255, 255, 255, .02); }
.tablo tr:last-child td { border-bottom: 0; }
.tablo .sag { text-align: right; }

/* ---------- Hero / arama ---------- */
.hero { padding: 70px 0 30px; text-align: center; }
.hero-rozet { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 40px; border: 1px solid rgba(139, 92, 246, .35); background: linear-gradient(90deg, rgba(139, 92, 246, .14), rgba(6, 182, 212, .14)); color: var(--ikincil); font-weight: 600; font-size: .85rem; margin-bottom: 18px; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: var(--baslik-kalinlik, 800); letter-spacing: -1px; max-width: 900px; margin: 0 auto 16px; }
.hero p.alt { color: var(--metin-soluk); font-size: clamp(1rem, 1.8vw, 1.2rem); max-width: 720px; margin: 0 auto 30px; }
.arama-kutusu { position: relative; max-width: 760px; margin: 0 auto; }
.arama-kutusu form { display: flex; align-items: center; gap: 8px; background: var(--kart); border: 1px solid var(--cizgi-2); border-radius: 60px; padding: 8px 8px 8px 22px; box-shadow: 0 20px 60px -20px rgba(139, 92, 246, .45); backdrop-filter: blur(18px); transition: var(--gecis); }
.arama-kutusu form:focus-within { border-color: var(--ana); box-shadow: 0 0 0 4px rgba(139, 92, 246, .18), 0 20px 60px -20px rgba(139, 92, 246, .6); }
.arama-kutusu input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--metin); font: inherit; font-size: 1.08rem; padding: 10px 0; }
.arama-kutusu .dugme { padding: 14px 26px; }
.arama-onerileri { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--kart-dolu); border: 1px solid var(--cizgi-2); border-radius: 16px; box-shadow: var(--golge); text-align: left; overflow: hidden; z-index: 20; }
.arama-onerileri a { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--cizgi); }
.arama-onerileri a:last-child { border: 0; }
.arama-onerileri a:hover, .arama-onerileri a.secili { background: rgba(139, 92, 246, .12); }
.arama-onerileri img { width: 48px; height: 32px; object-fit: cover; border-radius: 6px; }
.arama-onerileri small { color: var(--metin-soluk); display: block; }
.hizli-aramalar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; font-size: .85rem; color: var(--metin-soluk); }
.hizli-aramalar a { padding: 5px 12px; border-radius: 20px; border: 1px solid var(--cizgi); }
.hizli-aramalar a:hover { border-color: var(--ana); }

/* ---------- Kategori bulutu (serbest yerleşim) ---------- */
.kategori-bulutu { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 1000px; margin: 0 auto; }
.kategori-bulutu a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 40px; border: 1px solid var(--cizgi); background: var(--kart); font-weight: 600; transition: var(--gecis); backdrop-filter: blur(10px); }
.kategori-bulutu a:hover { transform: translateY(-3px); border-color: var(--kategori-renk, var(--ana)); color: var(--metin); box-shadow: 0 10px 30px -10px var(--kategori-renk, var(--ana)); }
.kategori-bulutu a i { color: var(--kategori-renk, var(--ana)); }
.kategori-bulutu a small { color: var(--metin-koyu); font-weight: 500; }
.kategori-bulutu .b1 { font-size: .85rem; } .kategori-bulutu .b2 { font-size: .95rem; } .kategori-bulutu .b3 { font-size: 1.08rem; padding: 12px 22px; } .kategori-bulutu .b4 { font-size: 1.22rem; padding: 14px 26px; }
.kategori-kartlari { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.kategori-karti { padding: 22px; border-radius: var(--radius); border: 1px solid var(--cizgi); background: var(--kart); transition: var(--gecis); }
.kategori-karti:hover { transform: translateY(-4px); border-color: var(--kategori-renk, var(--ana)); color: var(--metin); }
.kategori-karti .ikon { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 14px; color: var(--kategori-renk, var(--ana)); background: color-mix(in srgb, var(--kategori-renk, var(--ana)) 15%, transparent); }

/* ---------- Filtre sekmeleri ---------- */
.filtre-sekmeleri { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.filtre-sekmeleri a { padding: 9px 16px; border-radius: 30px; border: 1px solid var(--cizgi); font-weight: 600; font-size: .88rem; color: var(--metin-soluk); transition: var(--gecis); white-space: nowrap; }
.filtre-sekmeleri a:hover { color: var(--metin); border-color: var(--cizgi-2); }
.filtre-sekmeleri a.aktif { background: linear-gradient(135deg, var(--ana), var(--pembe)); border-color: transparent; color: #fff; }

/* ---------- Ürün ızgarası ve kartı ---------- */
.urun-izgara { display: grid; grid-template-columns: repeat(var(--sutun-d), minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1100px) { .urun-izgara { grid-template-columns: repeat(var(--sutun-t), minmax(0, 1fr)); } }
@media (max-width: 640px) { .urun-izgara { grid-template-columns: repeat(var(--sutun-m), minmax(0, 1fr)); gap: 14px; } }
.urun-karti { display: flex; flex-direction: column; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius); overflow: hidden; transition: var(--gecis); backdrop-filter: blur(12px); position: relative; }
.urun-karti:hover { transform: translateY(-5px); border-color: var(--cizgi-2); box-shadow: var(--golge); }
.urun-karti .gorsel { position: relative; aspect-ratio: var(--gorsel-oran); overflow: hidden; background: var(--zemin-2); display: block; }
.urun-karti .gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.urun-karti:hover .gorsel img { transform: scale(1.05); }
.urun-karti .rozetler { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
.urun-karti .rozetler .rozet { backdrop-filter: blur(8px); background: rgba(8, 9, 17, .7); color: #fff; }
.urun-karti .rozetler .rozet.indirim { background: var(--pembe); }
.urun-karti .rozetler .rozet.ucretsiz { background: var(--yesil); }
.urun-karti .rozetler .rozet.yeni { background: var(--ikincil); }
.favori-dugme { position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(8, 9, 17, .6); color: #fff; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(8px); transition: var(--gecis); }
.favori-dugme:hover { transform: scale(1.1); }
.favori-dugme.aktif { color: var(--pembe); }
.urun-karti .govde { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.urun-karti .kategori { font-size: .75rem; color: var(--ikincil); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.urun-karti h3 { font-size: 1.06rem; margin: 0; line-height: 1.35; }
.urun-karti .ozet { font-size: .86rem; color: var(--metin-soluk); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.teknik-etiketler { display: flex; flex-wrap: wrap; gap: 5px; }
.teknik-etiketler span, .teknik-etiketler a { font-size: .72rem; padding: 2px 9px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid var(--cizgi); color: var(--metin-soluk); font-family: var(--kod-yazi); }
[data-tema="acik"] .teknik-etiketler span, [data-tema="acik"] .teknik-etiketler a { background: #f3f4f6; }
.istatistikler { display: flex; gap: 12px; flex-wrap: wrap; font-size: .76rem; color: var(--metin-koyu); }
.istatistikler i { margin-right: 3px; }
.yildizlar { color: var(--vurgu); font-size: .8rem; letter-spacing: 1px; }
.urun-karti .alt { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--cizgi); }
.fiyat { display: flex; flex-direction: column; line-height: 1.15; }
.fiyat .eski { font-size: .8rem; color: var(--metin-koyu); text-decoration: line-through; }
.fiyat .guncel { font-family: var(--baslik-yazi); font-size: 1.25rem; font-weight: 800; }
.fiyat .guncel.ucretsiz { color: var(--yesil); }
.urun-karti .eylemler { display: flex; gap: 6px; }
.urun-karti .eylemler .dugme { padding: 8px 12px; font-size: .8rem; }

/* ---------- Ürün detay ---------- */
.kirinti { display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: var(--metin-soluk); margin: 24px 0; list-style: none; padding: 0; }
.kirinti li + li::before { content: "/"; margin-right: 8px; color: var(--metin-koyu); }
.urun-detay { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "galeri kutu" "alt kutu"; column-gap: 32px; row-gap: 0; align-items: start; }
.urun-detay > .urun-galeri-alani { grid-area: galeri; }
.urun-detay > .satin-alma-kutusu { grid-area: kutu; }
.urun-detay > .urun-alt { grid-area: alt; min-width: 0; }
.urun-alt .sekmeler { margin-top: 28px; flex-wrap: wrap; overflow: visible; }
.urun-alt .sekmeler button { padding: 11px 12px; font-size: .93rem; }
.ozet-cipler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ozet-cipler span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--cizgi); border-radius: 30px; font-size: .82rem; color: var(--metin-soluk); background: var(--kart); }
.ozet-cipler i { color: var(--ikincil); }
.urun-galeri-alani .demo-bilgi { margin-top: 16px; }
.galeri .ana-gorsel { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--cizgi); aspect-ratio: 16/10; background: var(--zemin-2); }
.galeri .ana-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.galeri .kucukler { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.galeri .kucukler button { flex: 0 0 88px; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: none; opacity: .7; }
.galeri .kucukler button.aktif, .galeri .kucukler button:hover { border-color: var(--ana); opacity: 1; }
.galeri .kucukler img { width: 100%; height: 100%; object-fit: cover; }
.satin-alma-kutusu { position: sticky; top: 100px; }
.satin-alma-kutusu h1 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
.satin-alma-kutusu .fiyat .guncel { font-size: 2rem; }
.hizmet-secimi { border: 1px solid var(--cizgi); border-radius: 14px; padding: 6px; margin: 16px 0; }
.hizmet-secimi label { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; }
.hizmet-secimi label:hover { background: rgba(139, 92, 246, .08); }
.hizmet-secimi input { accent-color: var(--ana); margin-top: 4px; }
.hizmet-secimi .ad { font-weight: 600; font-size: .92rem; }
.hizmet-secimi .ek { color: var(--ana); font-weight: 700; margin-left: auto; white-space: nowrap; }
.hizmet-secimi small { display: block; color: var(--metin-soluk); }
.toplam-satir { display: flex; justify-content: space-between; font-weight: 700; margin: 10px 0 16px; }
.demo-bilgi { font-size: .85rem; background: rgba(6, 182, 212, .08); border: 1px dashed rgba(6, 182, 212, .4); border-radius: 12px; padding: 12px; margin-top: 14px; }
.demo-bilgi code { background: rgba(0, 0, 0, .25); padding: 1px 6px; border-radius: 6px; }
.politika-kutusu { border: 1px solid var(--cizgi); border-radius: 14px; padding: 14px 16px; margin-top: 14px; font-size: .88rem; }
.politika-kutusu li { margin: 4px 0; }
.politika-kutusu i { width: 18px; color: var(--yesil); }
.sekmeler { display: flex; gap: 6px; border-bottom: 1px solid var(--cizgi); margin: 40px 0 20px; overflow-x: auto; }
.sekmeler button { background: none; border: 0; padding: 12px 16px; font: inherit; font-weight: 600; color: var(--metin-soluk); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.sekmeler button.aktif { color: var(--metin); border-color: var(--ana); }
.sekme-icerik { display: none; }
.sekme-icerik.aktif { display: block; }
.icerik-metni { font-size: 1rem; }
.icerik-metni img { border-radius: 12px; margin: 16px 0; }
.icerik-metni h2, .icerik-metni h3 { margin-top: 1.4em; }
.icerik-metni a { color: var(--ana); text-decoration: underline; }
.icerik-metni table { width: 100%; border-collapse: collapse; }
.icerik-metni td, .icerik-metni th { border: 1px solid var(--cizgi); padding: 8px; }
.icerik-metni .not-kutusu { border: 1px dashed var(--vurgu); background: rgba(245, 158, 11, .08); padding: 12px 14px; border-radius: 12px; margin-bottom: 18px; }
.icerik-metni iframe { max-width: 100%; border-radius: 12px; }
.ozellik-tablosu td:first-child { color: var(--metin-soluk); width: 40%; }
.surum-listesi li { margin-bottom: 14px; }
.surum-listesi .surum { font-family: var(--kod-yazi); color: var(--ikincil); font-weight: 600; }

/* ---------- Yorumlar / SSS ---------- */
.yorum { border-bottom: 1px solid var(--cizgi); padding: 18px 0; }
.yorum .ust { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.yorum .yanit { margin: 10px 0 0 18px; padding: 10px 14px; border-left: 3px solid var(--ana); background: rgba(139, 92, 246, .06); border-radius: 0 10px 10px 0; font-size: .9rem; }
.sss-listesi details { border: 1px solid var(--cizgi); border-radius: 14px; padding: 0 18px; margin-bottom: 10px; background: var(--kart); }
.sss-listesi summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.sss-listesi summary::after { content: "+"; font-size: 1.3rem; color: var(--ana); }
.sss-listesi details[open] summary::after { content: "–"; }
.sss-listesi details > div { padding-bottom: 16px; color: var(--metin-soluk); }
.referans-kartlari { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.referans-kartlari .kart p { color: var(--metin-soluk); font-size: .92rem; }

/* ---------- Hizmetler ---------- */
.hizmet-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.hizmet-karti { display: flex; flex-direction: column; gap: 10px; }
.hizmet-karti .ikon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; color: var(--ikincil); background: rgba(6, 182, 212, .12); }
.paket-listesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.paket { display: flex; flex-direction: column; }
.paket ul { padding-left: 0; list-style: none; margin: 12px 0; font-size: .9rem; }
.paket ul li { padding: 5px 0; color: var(--metin-soluk); }
.paket ul li::before { content: "✓"; color: var(--yesil); font-weight: 800; margin-right: 8px; }
.paket .fiyat { margin-top: auto; }

/* ---------- Güven alanı ---------- */
.guven-izgara { display: grid; grid-template-columns: repeat(var(--guven-sutun, 4), 1fr); gap: 16px; }
.guven-ogesi { text-align: center; padding: 26px 18px; }
.guven-ogesi i { font-size: 1.8rem; background: linear-gradient(135deg, var(--ikincil), var(--ana)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; display: block; }
.guven-ogesi p { color: var(--metin-soluk); font-size: .88rem; margin: 0; }

/* ---------- Bülten ---------- */
.bulten-kutu { max-width: 760px; margin: 0 auto; text-align: center; position: relative; overflow: hidden; }
.bulten-kutu form { display: flex; gap: 8px; margin-top: 18px; background: var(--girdi); border: 1px solid var(--cizgi-2); border-radius: 60px; padding: 6px 6px 6px 20px; }
.bulten-kutu input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--metin); font: inherit; }

/* ---------- Blog ---------- */
.blog-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.blog-karti { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.blog-karti .gorsel { aspect-ratio: 16/9; overflow: hidden; background: var(--zemin-2); }
.blog-karti .gorsel img { width: 100%; height: 100%; object-fit: cover; }
.blog-karti .govde { padding: 18px; }
.blog-karti time { font-size: .8rem; color: var(--metin-koyu); }
.makale { max-width: 820px; margin: 0 auto; }

/* ---------- Sepet / ödeme ---------- */
.iki-sutun { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.sepet-satiri { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--cizgi); }
.sepet-satiri .gorsel { width: 90px; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: var(--zemin-2); display: grid; place-items: center; color: var(--ikincil); font-size: 1.4rem; }
.sepet-satiri .gorsel img { width: 100%; height: 100%; object-fit: cover; }
.sepet-satiri small { color: var(--metin-soluk); }
.ozet-kutusu { position: sticky; top: 100px; }
.ozet-kutusu .satir { display: flex; justify-content: space-between; padding: 8px 0; }
.ozet-kutusu .toplam { border-top: 1px solid var(--cizgi); margin-top: 8px; padding-top: 14px; font-size: 1.25rem; font-weight: 800; font-family: var(--baslik-yazi); }
.odeme-yontemleri label { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--cizgi-2); border-radius: 14px; margin-bottom: 10px; cursor: pointer; transition: var(--gecis); }
.odeme-yontemleri label:has(input:checked) { border-color: var(--ana); background: rgba(139, 92, 246, .08); }
.odeme-yontemleri input { accent-color: var(--ana); }
.iban { font-family: var(--kod-yazi); letter-spacing: .5px; }
.iframe-kutu iframe { width: 100%; border: 0; min-height: 600px; border-radius: 14px; background: #fff; }

/* ---------- Müşteri paneli ---------- */
.hesap-duzen { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; padding: 32px 0 60px; align-items: start; }
.hesap-menu { position: sticky; top: 100px; padding: 12px; }
.hesap-menu .kullanici { padding: 10px 10px 16px; border-bottom: 1px solid var(--cizgi); margin-bottom: 8px; }
.hesap-menu .kullanici strong { display: block; }
.hesap-menu .kullanici small { color: var(--metin-soluk); }
.hesap-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: .9rem; color: var(--metin-soluk); font-weight: 500; }
.hesap-menu a i { width: 18px; text-align: center; }
.hesap-menu a:hover { color: var(--metin); background: rgba(255, 255, 255, .04); }
.hesap-menu a.aktif { background: rgba(139, 92, 246, .14); color: var(--metin); }
.hesap-menu a .sayac { margin-left: auto; background: var(--pembe); color: #fff; border-radius: 10px; font-size: .7rem; padding: 0 7px; }
.hesap-icerik h1 { font-size: 1.6rem; }
.ozet-kartlari { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.ozet-karti { padding: 18px; }
.ozet-karti .deger { font-family: var(--baslik-yazi); font-size: 1.7rem; font-weight: 800; }
.ozet-karti .ad { color: var(--metin-soluk); font-size: .85rem; }
.zaman-cizelgesi { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--cizgi-2); }
.zaman-cizelgesi li { position: relative; padding: 0 0 16px 18px; font-size: .9rem; }
.zaman-cizelgesi li::before { content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ana); }
.mesajlar .mesaj { padding: 14px 16px; border-radius: 14px; margin-bottom: 12px; border: 1px solid var(--cizgi); max-width: 85%; }
.mesajlar .mesaj.yonetici { background: rgba(139, 92, 246, .08); border-color: rgba(139, 92, 246, .3); margin-left: auto; }
.mesajlar .mesaj .ust { font-size: .78rem; color: var(--metin-soluk); margin-bottom: 6px; }
.mesajlar .mesaj p { white-space: pre-wrap; margin: 0; }

/* ---------- Giriş / kayıt ---------- */
.oturum-kutu { max-width: 520px; margin: 50px auto; }
.oturum-kutu.genis { max-width: 760px; }

/* ---------- Sayfalama ---------- */
.sayfalama { display: flex; justify-content: center; gap: 6px; margin: 32px 0 10px; flex-wrap: wrap; }
.sayfalama a, .sayfalama span { min-width: 40px; height: 40px; padding: 0 10px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--cizgi); font-weight: 600; }
.sayfalama a:hover { border-color: var(--ana); }
.sayfalama .aktif { background: var(--ana); border-color: var(--ana); color: #fff; }

/* ---------- Footer ---------- */
.site-alt { border-top: 1px solid var(--cizgi); margin-top: 40px; padding: 50px 0 24px; background: color-mix(in srgb, var(--zemin-2) 70%, transparent); }
.alt-izgara { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; }
.site-alt h4 { font-size: 1rem; margin-bottom: 14px; }
.site-alt ul { list-style: none; padding: 0; margin: 0; }
.site-alt li { margin-bottom: 8px; font-size: .9rem; color: var(--metin-soluk); }
.site-alt p { color: var(--metin-soluk); font-size: .9rem; }
.sosyal { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.sosyal a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--cizgi); color: var(--metin-soluk); transition: var(--gecis); }
.sosyal a:hover { background: var(--ana); border-color: var(--ana); color: #fff; transform: translateY(-3px); }
.alt-cizgi { border-top: 1px solid var(--cizgi); margin-top: 30px; padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--metin-koyu); }
.harita iframe { width: 100%; border-radius: 14px; }

/* ---------- Yüzen öğeler ---------- */
.whatsapp-dugme { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 1.7rem; box-shadow: 0 10px 30px rgba(37, 211, 102, .45); transition: var(--gecis); }
.whatsapp-dugme:hover { transform: scale(1.08); color: #fff; }
.cerez-bandi { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 90; max-width: 760px; margin: 0 auto; padding: 18px 20px; background: var(--kart-dolu); border: 1px solid var(--cizgi-2); border-radius: 18px; box-shadow: var(--golge); }
.cerez-bandi p { font-size: .88rem; color: var(--metin-soluk); margin-bottom: 12px; }
.cerez-bandi .eylemler { display: flex; gap: 8px; flex-wrap: wrap; }
.cerez-bandi .tercihler { margin: 10px 0; }
.bildirim-balonu { position: fixed; right: 20px; bottom: 90px; z-index: 95; max-width: 360px; padding: 14px 18px; border-radius: 14px; background: var(--kart-dolu); border: 1px solid var(--yesil); box-shadow: var(--golge); transform: translateY(20px); opacity: 0; transition: .35s; pointer-events: none; font-size: .9rem; }
.bildirim-balonu.goster { transform: none; opacity: 1; }
.bildirim-balonu.hata { border-color: var(--kirmizi); }

/* ---------- Boş durum / 404 / bakım ---------- */
.bos-durum { text-align: center; padding: 60px 20px; color: var(--metin-soluk); }
.bos-durum i { font-size: 3rem; margin-bottom: 14px; color: var(--metin-koyu); display: block; }
.hata-sayfasi { text-align: center; padding: 90px 20px; }
.hata-sayfasi .kod { font-family: var(--baslik-yazi); font-size: clamp(5rem, 14vw, 9rem); font-weight: 900; line-height: 1; }

/* ---------- Duyarlı (responsive) ---------- */
@media (max-width: 1500px) {
    .menu { gap: 0; }
    .menu > li > a { padding: 10px 9px; font-size: .88rem; }
    .ana-baslik .kap { gap: 12px; }
    .ikon-menu { gap: 4px; }
    .ikon-dugme { width: 38px; height: 38px; }
}
@media (max-width: 1100px) {
    .guven-izgara { grid-template-columns: repeat(2, 1fr); }
    .alt-izgara { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1280px) {
    .ana-baslik .kap { grid-template-columns: auto 1fr auto; min-height: 66px; }
    .menu { display: none; }
    .hamburger { display: inline-grid; }
    .logo { justify-content: flex-start; }
    .sag-grup { justify-content: flex-end; }
    .iki-sutun { grid-template-columns: 1fr; }
    .urun-detay { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "galeri" "kutu" "alt"; row-gap: 24px; }
    .satin-alma-kutusu, .ozet-kutusu { position: static; }
    .hesap-duzen { grid-template-columns: 1fr; }
    .hesap-menu { position: static; display: flex; overflow-x: auto; gap: 4px; padding: 8px; }
    .hesap-menu .kullanici { display: none; }
    .hesap-menu a { white-space: nowrap; }
}
@media (max-width: 640px) {
    .kap { padding: 0 14px; }
    .hero { padding: 40px 0 20px; }
    .arama-kutusu form { border-radius: 20px; padding: 8px; flex-wrap: wrap; }
    .arama-kutusu input { padding: 8px 10px; width: 100%; flex-basis: 100%; }
    .arama-kutusu .dugme { width: 100%; }
    .arama-kutusu form > i { display: none; }
    .form-izgara { grid-template-columns: 1fr; }
    .guven-izgara, .alt-izgara { grid-template-columns: 1fr; }
    .sepet-satiri { grid-template-columns: 64px 1fr; }
    .hizmet-secimi label { flex-wrap: wrap; }
    .hizmet-secimi label > span:not(.ek) { flex: 1 1 0; min-width: 0; }
    .hizmet-secimi label .ek { flex-basis: 100%; margin-left: 26px; }
    .satin-alma-kutusu { padding: 18px; }
    .sepet-satiri .gorsel { width: 64px; }
    .sepet-satiri > :nth-child(3), .sepet-satiri > :nth-child(4) { grid-column: 2; }
    .ikon-dugme { width: 38px; height: 38px; }
    .ikon-menu .masaustu { display: none; }
    .ust-bilgi .sag { display: none; }
    .bolum { padding-block: 36px; }
    .mesajlar .mesaj { max-width: 100%; }
    .bulten-kutu form { border-radius: 18px; flex-direction: column; padding: 8px; }
}
/* Mobil: bilgi barı kayan şerit olur (tüm mesajlar sırayla görünür) */
@media (max-width: 1100px) { .ust-bilgi .sag { display: none; } }
@media (max-width: 768px) {
    .ust-bilgi .kap { justify-content: flex-start; padding: 0; }
    .ust-bilgi-pencere { width: 100%; }
    .ust-bilgi ul.ust-bilgi-serit { justify-content: flex-start; width: max-content; gap: 0; animation: kaydir var(--bilgi-hiz, 28s) linear infinite; }
    .ust-bilgi ul.ust-bilgi-serit li { padding-right: 34px; }
    .ust-bilgi li.kopya { display: list-item; }
    .ust-bilgi .sag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    /* Kayan bantlar hariç: bunlar içeriğin kendisidir ve panelden kapatılabilir */
    *:not(.serit):not(.ust-bilgi-serit), *::before, *::after { animation: none !important; transition: none !important; }
}

/* Ürün teknik tablosu listeleri */
.gereksinim-listesi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 16px; }
.gereksinim-listesi i { color: var(--yesil, #10b981); font-size: .8rem; margin-right: 4px; }
.ozellik-tablosu .teknik-etiketler span { display: inline-block; }

/* Önizleme modunda (yönetim paneli tasarım ekranı) çerez bandı gösterilmez */
body[data-onizleme] .cerez-bandi { display: none !important; }
/* Footer ödeme logoları */
.odeme-logolari { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.odeme-logolari span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--cizgi); border-radius: 8px; font-size: .75rem; color: var(--metin-soluk); }
.odeme-logolari i { font-size: 1.1rem; }

/* ==========================================================================
   YAPAY ZEKÂ ZİYARETÇİ ASİSTANI
   ========================================================================== */
.ai-sohbet { --sohbet-renk: #6a45ff; position: fixed; bottom: 20px; z-index: 70; font-family: var(--yazi); }
.ai-sohbet.sag { right: 20px; } .ai-sohbet.sol { left: 20px; }
.ai-sohbet.sag.wp-var { bottom: 90px; }
.ai-sohbet-ac { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 1.45rem; background: var(--sohbet-renk); box-shadow: 0 14px 34px -8px color-mix(in srgb, var(--sohbet-renk) 75%, transparent); transition: transform .2s; display: grid; place-items: center; }
.ai-sohbet-ac:hover { transform: scale(1.07); }
.ai-sohbet-ac:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ai-sohbet.acik .ai-sohbet-ac { display: none; }
.ai-sohbet-nokta { position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; border-radius: 50%; background: #ef4444; border: 2px solid var(--zemin); }
.ai-sohbet-pencere { width: 370px; max-width: calc(100vw - 24px); height: min(580px, calc(100vh - 110px)); display: flex; flex-direction: column; background: var(--kart-dolu); border: 1px solid var(--cizgi-2); border-radius: 22px; overflow: hidden; box-shadow: var(--golge); }
.ai-sohbet-pencere[hidden] { display: none; }
.ai-sohbet.sag.wp-var.acik { bottom: 20px; }
.ai-sohbet.acik { z-index: 95; }
.ai-sohbet-pencere header { display: flex; align-items: center; gap: 11px; padding: 14px 14px 14px 16px; background: var(--sohbet-renk); color: #fff; }
.ai-sohbet-avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); font-size: 1.05rem; }
.ai-sohbet-baslik { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ai-sohbet-baslik small { font-size: .74rem; opacity: .85; }
.cevrimici { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; margin-right: 3px; }
.ai-sohbet-kapat { margin-left: auto; background: rgba(255, 255, 255, .16); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; }
.ai-sohbet-kapat:hover { background: rgba(255, 255, 255, .28); }
.ai-sohbet-govde { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; }
.ai-sohbet-balon { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: .9rem; line-height: 1.55; overflow-wrap: anywhere; }
.ai-sohbet-balon p { margin: 0 0 .45em; } .ai-sohbet-balon p:last-child { margin: 0; }
.ai-sohbet-balon ul, .ai-sohbet-balon ol { margin: 0 0 .45em; padding-left: 1.15em; }
.ai-sohbet-balon a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.ai-sohbet-balon.asistan { align-self: flex-start; background: rgba(255, 255, 255, .06); border: 1px solid var(--cizgi); color: var(--metin); border-bottom-left-radius: 5px; }
.ai-sohbet-balon.ben { align-self: flex-end; background: var(--sohbet-renk); color: #fff; border-bottom-right-radius: 5px; }
.ai-sohbet-balon.hata { border-color: rgba(239, 68, 68, .45); }
.ai-sohbet-yaziyor { display: inline-flex; gap: 4px; padding: 3px 0; }
.ai-sohbet-yaziyor i { width: 7px; height: 7px; border-radius: 50%; background: var(--metin-soluk); animation: ai-s-nokta 1s infinite ease-in-out; }
.ai-sohbet-yaziyor i:nth-child(2) { animation-delay: .15s; } .ai-sohbet-yaziyor i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-s-nokta { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-sohbet-bilgi { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.ai-sohbet-bilgi[hidden], .ai-sohbet-yaz[hidden] { display: none; }
.ai-sohbet-bilgi p { font-size: .82rem; color: var(--metin-soluk); margin: 0 0 2px; }
.ai-sohbet-bilgi input:not([type=checkbox]) { background: var(--girdi); border: 1px solid var(--cizgi-2); color: var(--metin); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: .88rem; }
.ai-sohbet-bilgi input:focus { outline: 2px solid var(--sohbet-renk); border-color: transparent; }
.ai-sohbet-kvkk { display: flex; gap: 8px; align-items: flex-start; font-size: .74rem; color: var(--metin-soluk); line-height: 1.45; cursor: pointer; }
.ai-sohbet-kvkk input { margin-top: 2px; accent-color: var(--sohbet-renk); }
.ai-sohbet-kvkk a { color: var(--metin); }
.ai-sohbet-hata { font-size: .8rem; color: #fca5a5; }
.ai-sohbet-bilgi .dugme { background: var(--sohbet-renk); justify-content: center; }
.ai-sohbet-atla { background: none; border: 0; color: var(--metin-soluk); font-size: .8rem; text-decoration: underline; cursor: pointer; }
.ai-sohbet-yaz { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--cizgi); }
.ai-sohbet-yaz textarea { flex: 1; resize: none; background: var(--girdi); border: 1px solid var(--cizgi-2); color: var(--metin); border-radius: 14px; padding: 9px 12px; font: inherit; font-size: .9rem; max-height: 120px; }
.ai-sohbet-yaz textarea:focus { outline: 2px solid var(--sohbet-renk); border-color: transparent; }
.ai-sohbet-yaz button { width: 44px; border: 0; border-radius: 14px; background: var(--sohbet-renk); color: #fff; cursor: pointer; }
.ai-sohbet-yaz button:disabled { opacity: .5; }
.ai-sohbet-not { font-size: .68rem; color: var(--metin-koyu); text-align: center; padding: 0 12px 9px; }
@media (max-width: 640px) {
    .ai-sohbet.acik { left: 0; right: 0; bottom: 0; }
    .ai-sohbet.acik .ai-sohbet-pencere { width: 100vw; max-width: none; height: 100dvh; border-radius: 0; border: 0; }
    .ai-sohbet.sag { right: 14px; } .ai-sohbet.sol { left: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ai-sohbet-yaziyor i { animation: none; } .ai-sohbet-ac { transition: none; } }

/* ==========================================================================
   HİZMETLERİM › OTOMATİK KURULUM
   ========================================================================== */
.oto-kurulum { margin-bottom: 22px; border-color: color-mix(in srgb, var(--ana) 35%, var(--cizgi)); }
.ok-baslik { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.ok-baslik h3 { margin: 0 0 4px; }
.ok-baslik p { margin: 0; color: var(--metin-soluk); font-size: .9rem; }
.ok-ikon { flex: 0 0 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--ana), var(--pembe)); color: #fff; font-size: 1.1rem; }
.ok-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ok-izgara.uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ok-yontem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ok-yontem label { cursor: pointer; }
.ok-yontem input { position: absolute; opacity: 0; }
.ok-yontem span { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--cizgi-2); border-radius: 14px; }
.ok-yontem span strong { display: block; margin-bottom: 4px; }
.ok-yontem span small { color: var(--metin-soluk); font-size: .8rem; }
.ok-yontem input:checked + span { border-color: var(--ana); box-shadow: 0 0 0 1px var(--ana) inset; background: color-mix(in srgb, var(--ana) 9%, transparent); }
.ok-yontem input:focus-visible + span { outline: 2px solid var(--ana); outline-offset: 2px; }
.ok-yardim { margin-bottom: 12px; font-size: .86rem; color: var(--metin-soluk); }
.ok-yardim summary { cursor: pointer; color: var(--ana); font-weight: 600; }
.ok-yardim ol { margin: 8px 0 0; padding-left: 1.2em; }
[data-ok-bolum][hidden] { display: none; }
.ok-cubuk { height: 8px; border-radius: 8px; background: var(--cizgi); overflow: hidden; margin-bottom: 10px; }
.ok-cubuk span { display: block; height: 100%; background: linear-gradient(90deg, var(--ana), var(--pembe)); transition: width .4s; }
.ok-tamamlandi .ok-cubuk span { background: var(--yesil); }
.ok-basarisiz .ok-cubuk span, .ok-manuel_gerekli .ok-cubuk span { background: var(--vurgu); }
.ok-yuzde { color: var(--metin-soluk); font-size: .85rem; }
.ok-adimlar { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; font-size: .86rem; color: var(--metin-soluk); }
.ok-adimlar i { width: 16px; text-align: center; font-size: .78rem; }
.ok-adimlar .basarili, .ok-adimlar .manuel_yapildi { color: var(--metin); } .ok-adimlar .basarili i, .ok-adimlar .manuel_yapildi i { color: var(--yesil); }
.ok-adimlar .suruyor { color: var(--metin); font-weight: 600; } .ok-adimlar .suruyor i { color: var(--ana); }
.ok-adimlar .basarisiz i { color: var(--kirmizi); } .ok-adimlar .manuel_gerekli i { color: var(--vurgu); }
.ok-adimlar .atlandi { opacity: .6; }
.ok-not { font-size: .84rem; color: var(--metin-soluk); }
@media (max-width: 720px) { .ok-izgara, .ok-izgara.uc, .ok-yontem { grid-template-columns: 1fr; } }

/* ---------- İstatistik sayaçları, yetkinlikler, harita (v1.2) ---------- */
.sayac-izgara { display: grid; grid-template-columns: repeat(var(--sayac-sutun, 4), 1fr); gap: 16px; }
.sayac-ogesi { text-align: center; padding: 28px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sayac-ogesi i { font-size: 1.5rem; color: var(--ikincil); margin-bottom: 4px; }
.sayac-ogesi strong { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.1; background: linear-gradient(135deg, var(--ana), var(--ikincil)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.sayac-ogesi > span { color: var(--metin-soluk); font-size: .92rem; font-weight: 600; }
.yetkinlik-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.yetkinlik-ogesi { display: flex; flex-direction: column; gap: 10px; padding: 26px 22px; color: var(--metin); text-decoration: none; transition: transform .2s, border-color .2s; }
a.yetkinlik-ogesi:hover { transform: translateY(-4px); border-color: var(--ana); }
.yetkinlik-ikon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; color: #fff; background: linear-gradient(135deg, var(--ana), var(--ikincil)); box-shadow: 0 10px 24px -12px var(--ana); }
.yetkinlik-ogesi h3 { font-size: 1.08rem; margin: 4px 0 0; }
.yetkinlik-ogesi p { color: var(--metin-soluk); font-size: .9rem; margin: 0; line-height: 1.6; }
.yetkinlik-seviye { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ys-cubuk { position: relative; flex: 1; height: 8px; border-radius: 99px; background: rgba(139, 92, 246, .14); }
.ys-cubuk span { position: absolute; inset: 0 auto 0 0; width: var(--seviye); border-radius: inherit; background: linear-gradient(90deg, var(--ana), var(--ikincil)); }
.yetkinlik-seviye b { font-size: .78rem; color: var(--metin-soluk); }
.yetkinlik-link { margin-top: auto; font-weight: 700; font-size: .88rem; color: var(--ana); }
.tm-harita { width: 100%; border-radius: 18px; overflow: hidden; border: 1px solid var(--cizgi); z-index: 1; }
.tm-harita .leaflet-popup-content { color: #111827; font-size: .88rem; line-height: 1.5; }
.tm-harita .leaflet-popup-content a { color: #6d28d9; }
.iletisim-harita { margin-top: 28px; }
.lokasyon-listesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.lokasyon-listesi .kart { padding: 16px 18px; }
.lokasyon-listesi p { margin: 6px 0; color: var(--metin-soluk); font-size: .88rem; }
.lokasyon-listesi i { color: var(--ikincil); }
@media (max-width: 900px) { .sayac-izgara { grid-template-columns: repeat(2, 1fr); } }
.ai-sohbet-ac .ai-sohbet-gorsel { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--sohbet-renk); }
.ai-sohbet-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }