/*!
 * Turla360 — Front Layout (header/nav/footer/search)
 * Önceden views/layouts/front.php içindeki <style> bloğunda bulunuyordu.
 * Bu katman front ön yüzündeki ortak kabuğu stillendirir.
 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{margin:0!important;padding:0!important}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:root{
  --ink:#0c0f14;--white:#fff;--off:#f7f6f3;--off2:#efede8;--stone:#e8e5df;
  --navy:#0f2044;--navy2:#163060;
  --blue:#2563eb;--blue2:#1d52d0;--blue-l:#eef2ff;--blue-xl:#e0e8ff;
  --amber:#c27c00;--amber-l:#fdf4dc;
  --pine:#0f5132;--pine-l:#d4edda;
  --rose:#c91b3a;--rose-l:#fce4e9;
  --t1:#0c0f14;--t2:#3d4148;--t3:#6b7280;--t4:#9ca3af;
  --border:#e5e0d8;--border2:#d0cac0;
  --head:'Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --serif:'Noto Sans',Georgia,serif;
  --s1:0 1px 2px rgba(12,15,20,.06);
  --s2:0 2px 8px rgba(12,15,20,.08),0 1px 2px rgba(12,15,20,.04);
  --s3:0 8px 24px rgba(12,15,20,.10),0 2px 6px rgba(12,15,20,.05);
  --s4:0 16px 48px rgba(12,15,20,.12),0 4px 12px rgba(12,15,20,.06);
  --s5:0 32px 80px rgba(12,15,20,.15),0 8px 24px rgba(12,15,20,.08);
  --r4:4px;--r8:8px;--r10:10px;--r12:12px;--r16:16px;--r20:20px;--r24:24px;
  --t:.22s cubic-bezier(.4,0,.2,1);
}
body{background:var(--white);color:var(--t1);font-family:var(--body);font-size:15px;line-height:1.6}
.tn-page-wrap{overflow-x:clip;min-height:100vh;display:flex;flex-direction:column}
.tn-page-wrap > footer{margin-top:auto}
/* 🔴 FLEX ITEM TUZAGI (kok duzeltme) — body burada `display:flex` (yapiskan
   footer icin). Bu yuzden dogrudan cocuklari FLEX ITEM olur ve varsayilan
   `min-width:auto` ile ICERIGININ altina KUCULEMEZ. Icinde genis bir sey
   varsa (yatay kaydirilan filtre cubugu gibi) tum sayfa onun genisligine
   sisiyor; `html{overflow-x:clip}` da bunu kirpiyor -> mobilde icerik
   ekran disinda KALIYOR ve ULASILAMIYOR.
   Canli kanit (390px): /turlar + /arama `.sr-wrap` 1200px (810px tasma),
   tur detayinda `.pd-wrapper` 1240px (850px tasma).
   `min-width:0` icerik sigdiginda HICBIR SEYI degistirmez, sismeyi engeller;
   ic kaydiricilarin (`overflow-x:auto`) calismasini da bu mumkun kilar. */
/* NOT: `min-width:0` TEK BASINA YETMEZ. Bu cocuklar genelde
   `max-width:1320px; margin:0 auto` (ortalanmis konteyner) kullanir ve
   flexbox'ta OTOMATIK YAN MARJ, `align-items:stretch`'i DEVRE DISI birakir
   -> eleman `fit-content` olur, yani ICERIGININ max-content genisligine
   sisip konteyneri asar. `width:100%` stretch'in isini ustlenir;
   `max-width` + `margin:0 auto` ortalamayi aynen korur. */
.tn-page-wrap > *{min-width:0;width:100%}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:var(--body);border:none}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--off)}::-webkit-scrollbar-thumb{background:var(--stone);border-radius:3px}
.tn-wrap{max-width:1320px;margin:0 auto;padding:0 32px}

/* ANN */
.tn-ann{background:var(--navy);height:38px;display:flex;align-items:center;justify-content:center;position:relative}
.tn-ann-txt{font-size:12px;font-weight:500;color:rgba(255,255,255,.82);letter-spacing:.01em}
.tn-ann-txt b{color:#fbbf24;margin:0 3px}
.tn-ann-txt a{color:#93c5fd;font-weight:600;text-underline-offset:3px;text-decoration:underline}
.tn-ann-x{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.5);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:var(--t)}
.tn-ann-x:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.9)}
.tn-ann-x svg{width:14px;height:14px}

/* UTIL BAR */
.tn-util{background:var(--off);border-bottom:1px solid var(--stone)}
.tn-util-in{height:35px;display:flex;align-items:center;justify-content:space-between}
.tn-util-l{display:flex;align-items:center;gap:20px}
.tn-util-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--t3)}
.tn-util-item svg{width:13px;height:13px;color:var(--t4)}
.tn-util-r{display:flex;align-items:center;gap:4px}
.tn-lang{display:flex;align-items:center;gap:3px;padding:3px 8px;border-radius:var(--r4);font-size:11px;font-weight:600;color:var(--t3);background:transparent;border:1px solid transparent;cursor:pointer;transition:var(--t)}
.tn-lang:hover{background:var(--white);border-color:var(--border);color:var(--t1)}
.tn-lang.on{background:var(--white);border-color:var(--border2);color:var(--navy)}

/* Sosyal medya ikonları — util bar + header, marka renkleriyle */
.tn-social{display:flex;align-items:center;gap:5px;padding-right:10px;margin-right:8px;border-right:1px solid var(--border)}
.tn-soc{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:var(--t);box-shadow:0 2px 5px rgba(0,0,0,.08)}
.tn-soc svg{width:13px;height:13px}
.tn-soc:hover{transform:translateY(-2px);box-shadow:0 6px 14px -3px rgba(0,0,0,.25)}
.tn-soc.ig{background:linear-gradient(135deg,#f58529 0%,#dd2a7b 50%,#8134af 100%)}
.tn-soc.fb{background:#1877f2}
.tn-soc.tw{background:#0f0f0f}
.tn-soc.yt{background:#ff0000}
.tn-soc.li{background:#0a66c2}

/* Footer'da sosyal medya — belirgin, büyük, renkli */
.tn-ft-social{display:flex;align-items:center;gap:8px}
.tn-ft-social .tn-soc{width:38px;height:38px;border-radius:10px}
.tn-ft-social .tn-soc svg{width:17px;height:17px}

@media(max-width:540px){.tn-ft-social .tn-soc{width:34px;height:34px}}

/* STICKY TOP WRAPPER — util bar + header birlikte sabit kalır */
#tn-sticky-top{position:fixed;top:0;left:0;right:0;width:100%;z-index:500}
/* Spacer --- fixed header alanini akista tutar */
#tn-hdr-spacer{height:70px}

/* HEADER */
.tn-hdr{background:var(--white);border-bottom:1px solid var(--border)}
.tn-hdr-main{height:70px;display:flex;align-items:center;gap:40px}
.tn-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.tn-logo-badge{width:40px;height:40px;border-radius:12px;background:var(--navy);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.tn-logo-badge::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 60%)}
.tn-logo-badge svg{width:22px;height:22px;position:relative;z-index:1}
.tn-logo-wm{font-family:var(--head);font-size:20px;font-weight:800;color:var(--navy);letter-spacing:-.04em;line-height:1}
.tn-logo-wm em{color:var(--blue);font-style:normal}
/* Nav */
.tn-nav{display:flex;align-items:center;gap:2px;flex:1}
.tn-ni{position:relative}
.tn-nb{display:flex;align-items:center;gap:5px;padding:8px 14px;border-radius:var(--r8);font-size:14px;font-weight:500;color:var(--t2);background:transparent;border:none;cursor:pointer;transition:var(--t);white-space:nowrap}
.tn-nb:hover,.tn-ni.op .tn-nb{color:var(--navy);background:var(--off)}
.tn-nb svg{width:14px;height:14px;color:var(--t4);transition:transform var(--t)}
.tn-ni.op .tn-nb svg{transform:rotate(180deg)}
.tn-drop{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--white);border:1px solid var(--border);border-radius:var(--r20);box-shadow:var(--s5);padding:20px;width:480px;display:none;z-index:600}
.tn-ni.op .tn-drop{display:block}
.tn-drop-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tn-drop-row{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:var(--r12);cursor:pointer;transition:var(--t)}
.tn-drop-row:hover{background:var(--off)}
.tn-drop-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:var(--off)}
/* Admin'in yukledigi kategori gorseli — GERCEK TUR FOTOGRAFI (GetYourGuide menusundeki
   gibi kucuk yuvarlak gorsel). `cover` + yuvarlak: kare kirpilmis 96x96 PNG'ler burada
   net durur. Sadece ikon/seffaf PNG yuklenirse de kutuyu tam doldurur. */
.tn-drop-img{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block}
.tn-drop-row .tn-drop-ico:has(.tn-drop-img){background:transparent;padding:0}
.tn-drop-t{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:2px}
.tn-drop-s{font-size:12px;color:var(--t3);line-height:1.4}
.tn-drop-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.tn-drop-all{font-size:13px;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:4px}
.tn-drop-all svg{width:14px;height:14px}
.tn-drop-cnt{font-size:12px;color:var(--t4);background:var(--off);padding:2px 8px;border-radius:100px}
/* Hdr right */
.tn-hdr-r{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.tn-ic-btn{width:38px;height:38px;border-radius:var(--r10);background:var(--off);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--t3);cursor:pointer;transition:var(--t)}
.tn-ic-btn:hover{background:var(--stone);color:var(--t1);border-color:var(--border2)}
.tn-ic-btn svg{width:17px;height:17px}
.tn-btn-login{padding:8px 18px;border-radius:var(--r10);font-size:13px;font-weight:600;color:var(--t2);background:var(--white);border:1.5px solid var(--border2);cursor:pointer;transition:var(--t);text-decoration:none;display:inline-flex;align-items:center}
.tn-btn-login:hover{border-color:var(--navy);color:var(--navy);background:var(--off)}
.tn-btn-cta{padding:9px 20px;border-radius:var(--r10);font-size:13px;font-weight:700;color:var(--white);background:var(--navy);border:none;cursor:pointer;transition:var(--t);display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.tn-btn-cta:active{transform:translateY(0) scale(.98)}
.tn-btn-cta:hover{background:var(--navy2);transform:translateY(-1px);box-shadow:var(--s3)}
.tn-btn-cta svg{width:14px;height:14px}

/* SEARCH DOCK */
.tn-srch-dock{background:var(--white);border-bottom:1px solid var(--border);padding:10px 0}
.tn-srch-bar{display:flex;align-items:center;background:var(--off);border:1.5px solid var(--border2);border-radius:var(--r16);overflow:hidden;transition:var(--t)}
.tn-srch-bar:focus-within{background:var(--white);border-color:var(--navy);box-shadow:0 0 0 4px rgba(15,32,68,.07)}
.tn-sf{display:flex;align-items:center;gap:8px;padding:9px 18px;flex:1;min-width:0}
.tn-sf-ico{width:17px;height:17px;color:var(--t4);flex-shrink:0}
.tn-sf-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t4);display:block;margin-bottom:1px}
.tn-sf-inp{border:none;outline:none;background:transparent;font-family:var(--body);font-size:13px;font-weight:500;color:var(--t1);width:100%}
.tn-sf-inp::placeholder{color:var(--t4);font-weight:400}
select.tn-sf-inp{cursor:pointer;appearance:none}
.tn-sf-inp option{background:var(--white)}
.tn-sf-div{width:1px;height:36px;background:var(--border2);flex-shrink:0}
.tn-btn-search{padding:10px 28px;margin:5px;border-radius:12px;background:var(--blue);color:var(--white);font-size:14px;font-weight:700;border:none;cursor:pointer;display:flex;align-items:center;gap:7px;transition:var(--t);flex-shrink:0;font-family:var(--body)}
.tn-btn-search:hover{background:var(--blue2);transform:translateY(-1px);box-shadow:var(--s3)}
.tn-btn-search svg{width:16px;height:16px}

/* TRUST BAR */
.tn-trust{background:var(--navy)}
.tn-trust-in{height:42px;display:flex;align-items:center;justify-content:center;gap:0}
.tn-trust-item{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.72);padding:0 22px;border-right:1px solid rgba(255,255,255,.1)}
.tn-trust-item:last-child{border-right:none}
.tn-trust-item svg{width:14px;height:14px;color:#4ade80;flex-shrink:0}

/* FLASH */
.tn-flash-wrap{max-width:1320px;margin:20px auto 0;padding:0 32px}
.tn-flash{display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:var(--r8);font-size:13px;font-weight:500;margin-bottom:8px}
.tn-flash svg{width:15px;height:15px;flex-shrink:0}
.tn-flash-err{background:var(--rose-l);border:1px solid rgba(201,27,58,.2);color:var(--rose)}
.tn-flash-ok{background:var(--pine-l);border:1px solid rgba(15,81,50,.2);color:var(--pine)}

/* FOOTER */
.tn-footer{background:#050c1a;padding:60px 0 28px}
.tn-ft-grid{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.tn-ft-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.tn-ft-logo-mark{width:36px;height:36px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:10px;display:flex;align-items:center;justify-content:center}
.tn-ft-logo-mark svg{width:20px;height:20px}
.tn-ft-logo-name{font-family:var(--head);font-size:20px;font-weight:800;color:var(--white);letter-spacing:-.03em}
.tn-ft-logo-name em{color:#60a5fa;font-style:normal}
.tn-ft-desc{font-size:13px;color:rgba(255,255,255,.38);line-height:1.65;max-width:240px;margin-bottom:20px}
.tn-ft-contacts{display:flex;flex-direction:column;gap:10px}
.tn-ft-con{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.4)}
.tn-ft-con svg{width:14px;height:14px;color:rgba(255,255,255,.25);flex-shrink:0}
.tn-ft-langs{display:flex;gap:6px;margin-top:16px}
.tn-ft-lang{padding:4px 9px;border-radius:var(--r4);border:1px solid rgba(255,255,255,.1);font-size:12px;color:rgba(255,255,255,.45);cursor:pointer;transition:var(--t);text-decoration:none}
.tn-ft-lang:hover,.tn-ft-lang.on{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85)}
.tn-ft-col-t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.28);margin-bottom:16px}
.tn-ft-links{display:flex;flex-direction:column;gap:11px}
.tn-ft-link{font-size:13px;color:rgba(255,255,255,.42);transition:var(--t)}
.tn-ft-link:hover{color:rgba(255,255,255,.85)}
.tn-ft-bot{border-top:1px solid rgba(255,255,255,.07);padding-top:22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.tn-ft-copy{font-size:12px;color:rgba(255,255,255,.28)}
.tn-ft-badges{display:flex;gap:8px}
.tn-ft-badge{padding:3px 9px;border-radius:var(--r4);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:11px;font-weight:700;color:rgba(255,255,255,.3)}

@media(max-width:1100px){.tn-nav{display:none}.tn-ft-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:768px){.tn-util,.tn-srch-dock,.tn-trust{display:none}.tn-ft-grid{grid-template-columns:1fr}.tn-ft-bot{flex-direction:column;text-align:center}}


/* ============================================================
   HEADER — inline açılan arama + mega menü (2026-04)
   ============================================================ */

/* Arama butonu aktif hali */
.tn-ic-btn-on { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }

/* Arama dock — header altından smooth açılır */
.tn-srch-dock {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--white) 0%, var(--off) 100%);
  box-shadow: 0 12px 32px -18px rgba(12,15,20,.28);
  overflow: hidden;
}
.tn-srch-enter { transition: max-height .28s ease, opacity .22s ease; max-height: 200px; opacity: 1; }
.tn-srch-enter-from { max-height: 0; opacity: 0; }
.tn-srch-enter-to   { max-height: 200px; opacity: 1; }
.tn-srch-leave { transition: max-height .22s ease, opacity .18s ease; }
.tn-srch-leave-from { max-height: 200px; opacity: 1; }
.tn-srch-leave-to   { max-height: 0; opacity: 0; }

/* MEGA MENÜ — daha geniş, daha görsel */
.tn-drop {
  width: 640px;
  padding: 22px 24px;
  border-radius: var(--r20);
  box-shadow: 0 24px 48px -16px rgba(12,15,20,.18), 0 8px 16px -8px rgba(12,15,20,.08);
}
.tn-drop-grid { gap: 8px; }
.tn-drop-row { padding: 12px 14px; border-radius: var(--r12); }
.tn-drop-row:hover { background: var(--blue-l); }
.tn-drop-ico {
  width: 44px; height: 44px; border-radius: 12px;
  font-size: 20px;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.tn-drop-row:hover .tn-drop-ico { transform: scale(1.08) rotate(-3deg); }
.tn-drop-t { font-size: 14px; font-weight: 700; color: var(--t1); letter-spacing: -.01em; }
.tn-drop-s { font-size: 12px; color: var(--t3); margin-top: 4px; }
.tn-drop-foot { border-top: 1px solid var(--off2); padding-top: 14px; margin-top: 14px; }

/* Destinasyon mega menü için özel genişlik */
.tn-ni#niD .tn-drop { width: 380px; padding: 16px; }
.tn-ni#niD .tn-drop .tn-drop-row { padding: 10px 12px; }

/* Mega menü açılış animasyonu (hover ile) — yumuşak fade + slide */
.tn-drop {
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  pointer-events: none;
  transition: opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1);
  display: block !important;     /* Eski "display:none" kuralını override et — animasyon için */
  visibility: hidden;
}
.tn-ni.op .tn-drop {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  visibility: visible;
}

/* Drop satırları artık <a> — alt çizgiyi gizle */
.tn-drop-row { text-decoration: none; color: inherit; }
.tn-drop-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Drop eyebrow — Bölge: Fethiye notu */
.tn-drop-eyebrow {
  display: flex; align-items: center; gap: 8px;
  margin: -4px 0 12px;
  padding: 8px 12px;
  border-radius: var(--r10);
  background: linear-gradient(90deg, rgba(255,91,61,.08), rgba(255,180,0,.06));
  border: 1px solid rgba(255,91,61,.14);
  font-size: 12px;
  color: var(--t2);
}
.tn-drop-eyebrow svg { width: 14px; height: 14px; color: var(--theme-primary, #1a56db); flex-shrink: 0; }
.tn-drop-eyebrow strong { color: var(--t1); font-weight: 700; }
.tn-drop-eyebrow-note {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #C2331A;
  background: #FFF1EE;
  padding: 2px 8px;
  border-radius: 100px;
}

@media (max-width: 900px) {
  .tn-drop { width: calc(100vw - 40px); max-width: 520px; }
  .tn-drop-grid { grid-template-columns: 1fr; }
  .tn-drop-eyebrow-note { display: none; }
}

/* ============================================================
   SCROLL REVEAL — bölümlere yumuşak fade-up giriş
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
[data-reveal].tn-reveal-in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   HERO BLOB HALOS — coral / sun yumuşak ışıklar
   ============================================================ */
.tn-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .55;
  pointer-events: none;
  will-change: transform;
}
.tn-hero-blob--coral {
  width: 480px; height: 480px;
  background: radial-gradient(circle at 30% 30%, var(--theme-primary, #1a56db) 0%, transparent 65%);
  top: -120px; right: -80px;
  animation: blobFloat 18s ease-in-out infinite;
}
.tn-hero-blob--sun {
  width: 360px; height: 360px;
  background: radial-gradient(circle at 50% 50%, #FFB400 0%, transparent 70%);
  bottom: -100px; left: 8%;
  opacity: .35;
  animation: blobFloatAlt 22s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tn-hero-blob { animation: none; }
}


/* ============================================================
   LOGIN MODAL — üye + şirket tab (2026-04)
   ============================================================ */
.tn-login-backdrop { position:fixed; inset:0; background:rgba(12,15,20,.58); backdrop-filter:blur(4px); z-index:1000; }
.tn-login-modal { position:fixed; inset:0; z-index:1001; display:flex; align-items:center; justify-content:center; padding:24px; overflow-y:auto; }
.tn-login-card { background:#fff; border-radius:24px; width:100%; max-width:440px; padding:36px 32px 28px; position:relative; box-shadow:0 32px 80px -24px rgba(12,15,20,.4); }
.tn-lm-enter { transition: opacity .22s ease, transform .28s cubic-bezier(.4,0,.2,1); }
.tn-lm-enter-from { opacity:0; transform: translateY(12px) scale(.98); }
.tn-lm-enter-to   { opacity:1; transform: translateY(0) scale(1); }

.tn-login-close { position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:10px; background:#f3f4f6; border:none; cursor:pointer; color:#6b7280; display:flex; align-items:center; justify-content:center; transition:.18s; }
.tn-login-close:hover { background:#e5e7eb; color:#0a1628; }
.tn-login-close svg { width:16px; height:16px; }

.tn-login-head { text-align:center; margin-bottom:22px; }
.tn-login-logo { display:inline-flex; align-items:center; gap:9px; margin-bottom:14px; }
.tn-login-title { font-family:var(--head); font-size:24px; font-weight:800; color:var(--navy); letter-spacing:-.03em; margin-bottom:5px; }
.tn-login-sub { font-size:13px; color:var(--t3); line-height:1.55; max-width:320px; margin:0 auto; }

.tn-login-tabs { display:flex; gap:6px; background:var(--off); border:1px solid var(--border); border-radius:12px; padding:4px; margin-bottom:22px; }
.tn-login-tab { flex:1; padding:10px 12px; border-radius:9px; font-size:13px; font-weight:600; color:var(--t3); background:transparent; border:none; cursor:pointer; transition:.18s; font-family:var(--body); display:flex; align-items:center; justify-content:center; gap:7px; }
.tn-login-tab svg { width:14px; height:14px; }
.tn-login-tab.on { background:#fff; color:var(--navy); box-shadow:var(--s1); }
.tn-login-tab:hover:not(.on) { color:var(--t1); }

.tn-login-form { display:flex; flex-direction:column; gap:14px; }
.tn-lf-field label { display:block; font-size:12px; font-weight:600; color:var(--t2); margin-bottom:6px; }
.tn-lf-field input { width:100%; padding:11px 14px; border-radius:10px; border:1.5px solid var(--border2); background:#fff; font-family:var(--body); font-size:14px; color:var(--t1); outline:none; transition:.18s; }
.tn-lf-field input:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.09); }
.tn-lf-eye { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--t4); cursor:pointer; padding:6px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.tn-lf-eye:hover { background:var(--off); color:var(--t2); }
.tn-lf-eye svg { width:16px; height:16px; }
.tn-lf-meta { display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.tn-lf-check { display:flex; align-items:center; gap:7px; color:var(--t2); cursor:pointer; }
.tn-lf-check input { width:16px; height:16px; accent-color:var(--blue); cursor:pointer; }
.tn-lf-forgot { color:var(--blue); font-weight:600; text-decoration:none; }
.tn-lf-forgot:hover { text-decoration:underline; }
.tn-lf-submit { width:100%; padding:13px; border-radius:12px; background:var(--navy); color:#fff; font-family:var(--head); font-size:15px; font-weight:800; border:none; cursor:pointer; transition:.2s; margin-top:4px; letter-spacing:-.01em; }
.tn-lf-submit:hover { background:var(--navy2); transform:translateY(-1px); box-shadow:0 8px 24px -6px rgba(15,32,68,.4); }
.tn-lf-alt { text-align:center; font-size:13px; color:var(--t3); padding-top:8px; border-top:1px solid var(--off2); }
.tn-lf-alt a { color:var(--blue); font-weight:600; text-decoration:none; }
.tn-lf-alt a:hover { text-decoration:underline; }

@media(max-width:480px){.tn-login-card{padding:28px 22px 20px;border-radius:20px}.tn-login-title{font-size:20px}}

/* ═══════════════════════════════════════════════════════════════
   HERO ALTI HIZLI ERİŞİM ÇUBUĞU — yolcu360 tarzı premium tasarım
   front.css v102
   ═══════════════════════════════════════════════════════════════ */
.tn-qa-section {
  background: #fff;
  border-bottom: 1px solid #e8edf5;
}
.tn-qa-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.tn-qa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.tn-qa-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 32px;
  text-decoration: none;
  border-right: 1px solid #e8edf5;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.4,0,0.2,1),
              box-shadow  0.2s cubic-bezier(0.4,0,0.2,1),
              transform   0.2s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}
.tn-qa-item:last-child {
  border-right: none;
}
.tn-qa-item:hover {
  background: #f8faff;
  box-shadow: 0 2px 12px rgba(21,87,220,0.08);
  transform: translateY(-2px);
  z-index: 1;
}
.tn-qa-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.tn-qa-item:hover .tn-qa-icon-wrap {
  transform: scale(1.08);
}
.tn-qa-icon-wrap svg {
  width: 28px;
  height: 28px;
}
.tn-qa-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tn-qa-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #1a2744;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tn-qa-link {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: #1557DC;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.tn-qa-link .qa-arrow {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.tn-qa-item:hover .tn-qa-link .qa-arrow {
  transform: translateX(4px);
}

/* Renk varyantları — ikon arka planı */
.tn-qa-icon-wrap.qa-blue   { background: #EEF4FF; color: #1557DC; }
.tn-qa-icon-wrap.qa-orange { background: #FFF4EC; color: #E8650A; }
.tn-qa-icon-wrap.qa-green  { background: #EDFBF4; color: #0D9E6B; }
.tn-qa-icon-wrap.qa-purple { background: #F4EEFF; color: #7C3AED; }

/* ══════════════════════════════════════════
   GYG Style Filtre Sistemi — category_page
   ══════════════════════════════════════════ */

/* Filter bar wrapper */
.gyg-filter-bar-wrap{background:#fff;border-bottom:1px solid #e2e8f0;padding:0;position:sticky;top:0;z-index:30}
.gyg-filter-bar-inner{display:flex;align-items:center;gap:8px;padding:12px 20px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:1280px;margin:0 auto}
.gyg-filter-bar-inner::-webkit-scrollbar{display:none}
.gyg-filter-result-count{display:flex;align-items:center;gap:12px;padding:0 20px 10px;font-size:13px;color:#64748b;max-width:1280px;margin:0 auto}
.gyg-filter-clear-all{color:#1d4ed8;text-decoration:underline;font-size:12px;cursor:pointer}

/* Pill butonları */
.gyg-filter-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:24px;border:1.5px solid #d1d5db;background:#fff;font-size:13px;font-weight:500;color:#374151;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s;flex-shrink:0}
.gyg-filter-pill:hover{border-color:#6b7280;background:#f9fafb}
.gyg-filter-pill-active{border-color:#111827!important;background:#111827!important;color:#fff!important;font-weight:600}
.gyg-filter-pill-main{border-color:#111827;background:#fff;color:#111827;font-weight:600;gap:7px}
.gyg-filter-pill-main:hover{background:#f9fafb}
.gyg-filter-count-badge{background:#111827;color:#fff;border-radius:50%;min-width:18px;height:18px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 3px;margin-left:2px}
.gyg-filter-pill-active .gyg-filter-count-badge{background:#fff;color:#111827}
.gyg-pill-remove{color:inherit;opacity:.7;font-size:12px;margin-left:2px;text-decoration:none;line-height:1}
.gyg-pill-remove:hover{opacity:1}

/* Pill dropdown (sıralama) */
.gyg-filter-pill-wrap{position:relative}
.gyg-pill-dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:180px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.10);z-index:100;overflow:hidden}
.gyg-pill-dd-item{display:block;padding:10px 16px;font-size:13px;color:#374151;text-decoration:none;transition:background .12s}
.gyg-pill-dd-item:hover{background:#f8fafc}
.gyg-pill-dd-item.active{font-weight:700;color:#111827;background:#f1f5f9}

/* Overlay */
.gyg-filter-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;cursor:pointer}

/* Drawer */
.gyg-filter-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;background:#fff;z-index:1001;display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(0,0,0,.15);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.gyg-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e2e8f0;flex-shrink:0}
.gyg-drawer-title{font-size:17px;font-weight:700;color:#111827}
.gyg-drawer-close{background:none;border:none;cursor:pointer;color:#6b7280;padding:4px;border-radius:8px;line-height:1;display:flex;align-items:center}
.gyg-drawer-close:hover{background:#f3f4f6;color:#111827}
.gyg-drawer-body{flex:1;overflow-y:auto;padding-bottom:8px}

/* Drawer bölümler */
.gyg-drawer-section{border-bottom:1px solid #f1f5f9}
.gyg-drawer-section-head{width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:none;border:none;cursor:pointer;font-size:15px;font-weight:700;color:#111827;text-align:left;transition:background .12s}
.gyg-drawer-section-head:hover{background:#fafafa}
.gyg-drawer-section-head svg{flex-shrink:0;transition:transform .2s ease}
.gyg-drawer-section-body{padding:4px 24px 18px}

/* Checkboxlar */
.gyg-drawer-check{display:flex;align-items:center;gap:12px;padding:9px 0;cursor:pointer;font-size:14px;color:#374151}
.gyg-drawer-check input[type=checkbox],.gyg-drawer-check input[type=radio]{width:18px;height:18px;accent-color:#111827;cursor:pointer;flex-shrink:0;border-radius:4px}
.gyg-drawer-check:hover span{color:#111827}

/* Fiyat alanları */
.gyg-price-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.gyg-price-label{font-size:12px;color:#6b7280;font-weight:500;margin-bottom:6px;display:block}
.gyg-price-input-wrap{display:flex;align-items:center;border:1.5px solid #d1d5db;border-radius:10px;overflow:hidden;transition:border-color .15s}
.gyg-price-input-wrap:focus-within{border-color:#111827}
.gyg-price-currency{padding:0 10px;font-size:13px;color:#6b7280;background:#f9fafb;border-right:1px solid #e5e7eb;height:40px;display:flex;align-items:center;flex-shrink:0}
.gyg-price-input{flex:1;border:none;outline:none;padding:0 10px;height:40px;font-size:14px;color:#111827;background:#fff;min-width:0}
.gyg-currency-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#6b7280;background:#f9fafb;border:1px solid #e5e7eb;padding:5px 12px;border-radius:8px;margin-top:4px}

/* Drawer Footer */
.gyg-drawer-footer{flex-shrink:0;border-top:1px solid #e2e8f0;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff}
.gyg-drawer-clear{font-size:14px;color:#374151;text-decoration:underline;cursor:pointer;background:none;border:none;padding:0}
.gyg-drawer-clear:hover{color:#111827}
.gyg-drawer-apply{background:#111827;color:#fff;border:none;border-radius:12px;padding:12px 24px;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s;flex-shrink:0}
.gyg-drawer-apply:hover{background:#1f2937}

/* Mobil uyum */
@media(max-width:640px){
  .gyg-filter-drawer{width:100vw}
  .gyg-filter-bar-inner{padding:10px 16px}
  .gyg-filter-result-count{padding:0 16px 10px}
}

/* ═══ FAVORI TOAST (global — favorite.js her sayfada dinamik ekler) ═══
   Önceden yalnız search.css/product-detail.css'te vardı; kategori/ana sayfa gibi
   o CSS'leri yüklemeyen sayfalarda toast stilsiz/görünmez kalıyordu. */
.fav-toast{
  position:fixed;bottom:28px;left:50%;
  transform:translateX(-50%) translateY(100px);
  background:#111827;color:#fff;
  padding:13px 22px 13px 16px;border-radius:999px;
  font-size:14px;font-weight:500;white-space:nowrap;
  box-shadow:0 12px 32px rgba(0,0,0,.32),0 2px 8px rgba(0,0,0,.18);
  z-index:9999;
  transition:transform .38s cubic-bezier(.34,1.46,.64,1),opacity .25s ease;
  opacity:0;pointer-events:none;max-width:90vw;
  display:flex;align-items:center;gap:10px;
}
.fav-toast.fav-toast-show{transform:translateX(-50%) translateY(0);opacity:1}
.fav-toast .ft-icon{
  width:28px;height:28px;background:#dc2626;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.fav-toast .ft-icon svg{width:14px;height:14px}
.fav-toast .ft-remove .ft-icon{background:#4b5563}
.fav-toast .ft-text{line-height:1.3}
@media (max-width:480px){
  .fav-toast{
    left:16px;right:16px;
    transform:translateX(0) translateY(100px);
    border-radius:14px;white-space:normal;max-width:none;
    justify-content:flex-start;
  }
  .fav-toast.fav-toast-show{transform:translateX(0) translateY(0)}
}

/* ── Hover geri kazanımı (CSP) ────────────────────────────────────────────
   Footer ve bazı liste linklerinde hover efekti satır içi onmouseover ile
   yapılıyordu; sayfada CSP nonce'u bulunduğundan tarayıcı 'unsafe-inline'ı
   yok sayar ve bu handler'lar HİÇ çalışmazdı. 37 ölü handler kaldırıldı,
   davranış burada gerçek CSS ile veriliyor. */
footer a { transition: color .16s ease, opacity .16s ease; }
footer a:hover { color: #fff !important; }
footer a[style*="#fbbf24"]:hover { color: #fff !important; }

/* Beyaz üstü yarı saydam butonlar (hero / CTA şeritleri) */
a[style*="rgba(255,255,255,0.12)"]:hover,
a[style*="rgba(255,255,255,.12)"]:hover,
button[style*="rgba(255,255,255,0.12)"]:hover {
  background: rgba(255, 255, 255, .22) !important;
}

/* ── ZENGIN METIN GOVDESI (.page-content) ───────────────────────────────
   Yonetimden girilen HTML icerigin (statik sayfalar + blog yazilari)
   ortak tipografisi. ONCEDEN bu kurallar yalniz views/front/page.php
   icindeki <style> blogundaydi -> ayni sinifi kullanan blog yazisi
   (views/front/posts/show.php) hicbirini ALMIYORDU.
   Ayrica Tailwind preflight `ul{list-style:none}` yapar -> madde
   isaretleri kayboluyordu (canli kanit: /sayfa/kariyer listStyleType=none).
   Tek kaynak buraya alindi; page.php'deki blok kaldirildi. */
.page-content { font-size: 16px; line-height: 1.75; color: #374151; }
.page-content h1, .page-content h2, .page-content h3, .page-content h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: #0a1628;
  margin: 1.5em 0 .6em;
  line-height: 1.25;
}
/* em yerine px: 2em/1.5em/1.2em -> 32/24/19.2px uretiyordu; 19.2 tipografi
   olceginde (…16·18·20·22·24·28·32) YOK. Olcege oturtuldu. */
.page-content h1 { font-size: 32px; }
.page-content h2 { font-size: 24px; }
.page-content h3 { font-size: 20px; }
.page-content p { margin: 0 0 1.2em; }
.page-content ul, .page-content ol { margin: 0 0 1.2em; padding-left: 1.6em; }
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content ul ul { list-style: circle; }
.page-content li { margin-bottom: .4em; }
.page-content li::marker { color: var(--theme-primary, #1557DC); }
.page-content a { color: var(--theme-primary, #1557DC); text-decoration: underline; text-underline-offset: 3px; }
.page-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.2em 0; }
.page-content blockquote {
  margin: 1.5em 0;
  padding: 16px 20px;
  border-left: 4px solid var(--theme-primary, #1557DC);
  background: #f8fafc;
  border-radius: 0 12px 12px 0;
  color: #475569;
}
.page-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.page-content th, .page-content td { border: 1px solid #e5e7eb; padding: 10px 12px; text-align: left; }
.page-content th { background: #f8fafc; font-weight: 700; color: #0a1628; }

/* ══════════════════════════════════════════════════════════════════════════
   MEGA MENU — GetYourGuide deseni (2026-09-19)
   Solda kategori listesi, sagda o kategorinin turlari (fotograf + baslik).

   🔴 SEKME DEGISIMI **JAVASCRIPT KULLANMAZ**: gizli `input[type=radio]` panelin
   en basinda durur, secim `:checked ~ .tn-mega-govde ...` kardes seciciyle
   ilgili paneli gorunur yapar. Nedeni: projede CSP nonce var (satir ici handler
   calismaz) ve menu, JS yuklenmeden de kullanilabilir olmali.
   ⚠️ Radio'lari `.tn-mega-govde`'den SONRAYA tasima — `~` yalniz sonraki
   kardesleri secer, sekmeler calismaz olur.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ KONUM: normal dropdown `left:50%; transform:translateX(-50%)` ile ORTALANIR.
   Mega panel 980px genis oldugu icin ortalandiginda SOL KOLONU ekran disina
   tasiyordu (olculdu: sol kategori listesi hic gorunmuyordu). Panel artik nav
   ogesinin SOLUNA hizali acilir. */
.tn-drop.tn-mega{ width:min(980px, calc(100vw - 32px)); padding:0; overflow:hidden;
  left:0; right:auto; transform:none; }
/* ⚠️ OZGULLUK TUZAGI (olculdu): acilis kurali `.tn-ni.op .tn-drop` (0,3,0)
   `transform: translateX(-50%) translateY(0)` iceriyor ve menu ACILDIGI anda
   paneli yeniden ortaliyordu -> 980px panel sola tasip SOL KOLONU ekran
   disinda birakiyordu (panelX = -220px). Bu yuzden acik-durum kuralini AYNI
   seviyede (0,4,0) ezmek gerekir; `!important` yerine dogru ozgulluk. */
.tn-ni.op .tn-drop.tn-mega{ transform:translateY(0); left:0; }
.tn-mega-radio{ position:absolute; opacity:0; pointer-events:none; width:0; height:0 }

.tn-mega-govde{ display:grid; grid-template-columns:232px 1fr; min-height:300px }

/* ── SOL: kategori listesi ── */
.tn-mega-sol{
  background:var(--off, #f8fafc); border-right:1px solid var(--border, #e8eaee);
  padding:14px 10px; display:flex; flex-direction:column; gap:2px;
}
.tn-mega-sekme{
  display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:10px;
  font-size:14px; font-weight:700; color:var(--t2, #475569); cursor:pointer;
  user-select:none; transition:background .12s, color .12s;
}
.tn-mega-sekme:hover{ background:rgba(15,23,42,.05); color:var(--t1, #0f172a) }
.tn-mega-nokta{
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
  border:2px solid transparent; background:transparent; transition:.12s;
}
.tn-mega-tumu{
  margin-top:auto; display:inline-flex; align-items:center; gap:6px; padding:10px 12px;
  font-size:13px; font-weight:700; color:var(--blue, #1557DC); text-decoration:none;
}
.tn-mega-tumu svg{ width:14px; height:14px }

/* ── SAG: tur listesi ── */
.tn-mega-sag{ padding:16px 18px; min-width:0 }
.tn-mega-panel{ display:none }                    /* varsayilan gizli; :checked acar */
.tn-mega-izgara{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px 14px;
}
.tn-mega-tur{
  display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px;
  text-decoration:none; transition:background .12s;
}
.tn-mega-tur:hover{ background:var(--off, #f8fafc) }
.tn-mega-foto{
  flex-shrink:0; width:46px; height:46px; border-radius:50%; overflow:hidden;
  background:var(--off2, #eef1f5); display:grid; place-items:center;
}
.tn-mega-foto img{ width:100%; height:100%; object-fit:cover; display:block }
.tn-mega-metin{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.tn-mega-baslik{
  font-size:13.5px; font-weight:700; color:var(--t1, #0f172a); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tn-mega-alt{ font-size:12px; color:var(--t3, #64748b) }
.tn-mega-kategori-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--border, #e8eaee); width:100%;
  font-size:13px; font-weight:700; color:var(--blue, #1557DC); text-decoration:none;
}
.tn-mega-kategori-link svg{ width:14px; height:14px }
.tn-mega-bos{ font-size:13px; color:var(--t3, #64748b); padding:26px 4px; line-height:1.7 }
.tn-mega-bos a{ color:var(--blue, #1557DC); font-weight:700; text-decoration:none }

/* ── JS'SIZ SEKME MANTIGI ──────────────────────────────────────────────────
   n. radio secili ise: sol listedeki n. etiket AKTIF, sagdaki n. panel GORUNUR.
   (4 alt kategori + "En populer" = en fazla 6 sekme destekleniyor; daha fazlasi
   gerekirse bu blogu uzat.) */
.tn-mega-radio:nth-of-type(1):checked ~ .tn-mega-govde .tn-mega-sol .tn-mega-sekme:nth-of-type(1),
.tn-mega-radio:nth-of-type(2):checked ~ .tn-mega-govde .tn-mega-sol .tn-mega-sekme:nth-of-type(2),
.tn-mega-radio:nth-of-type(3):checked ~ .tn-mega-govde .tn-mega-sol .tn-mega-sekme:nth-of-type(3),
.tn-mega-radio:nth-of-type(4):checked ~ .tn-mega-govde .tn-mega-sol .tn-mega-sekme:nth-of-type(4),
.tn-mega-radio:nth-of-type(5):checked ~ .tn-mega-govde .tn-mega-sol .tn-mega-sekme:nth-of-type(5),
.tn-mega-radio:nth-of-type(6):checked ~ .tn-mega-govde .tn-mega-sol .tn-mega-sekme:nth-of-type(6){
  background:#fff; color:var(--t1, #0f172a); box-shadow:0 1px 3px rgba(10,22,40,.08);
}
.tn-mega-radio:nth-of-type(1):checked ~ .tn-mega-govde .tn-mega-sol .tn-mega-sekme:nth-of-type(1) .tn-mega-nokta,
.tn-mega-radio:nth-of-type(2):checked ~ .tn-mega-govde .tn-mega-sol .tn-mega-sekme:nth-of-type(2) .tn-mega-nokta,
.tn-mega-radio:nth-of-type(3):checked ~ .tn-mega-govde .tn-mega-sol .tn-mega-sekme:nth-of-type(3) .tn-mega-nokta,
.tn-mega-radio:nth-of-type(4):checked ~ .tn-mega-govde .tn-mega-sol .tn-mega-sekme:nth-of-type(4) .tn-mega-nokta,
.tn-mega-radio:nth-of-type(5):checked ~ .tn-mega-govde .tn-mega-sol .tn-mega-sekme:nth-of-type(5) .tn-mega-nokta,
.tn-mega-radio:nth-of-type(6):checked ~ .tn-mega-govde .tn-mega-sol .tn-mega-sekme:nth-of-type(6) .tn-mega-nokta{
  background:var(--theme-primary, #1557DC);
}
.tn-mega-radio:nth-of-type(1):checked ~ .tn-mega-govde .tn-mega-sag .tn-mega-panel:nth-of-type(1),
.tn-mega-radio:nth-of-type(2):checked ~ .tn-mega-govde .tn-mega-sag .tn-mega-panel:nth-of-type(2),
.tn-mega-radio:nth-of-type(3):checked ~ .tn-mega-govde .tn-mega-sag .tn-mega-panel:nth-of-type(3),
.tn-mega-radio:nth-of-type(4):checked ~ .tn-mega-govde .tn-mega-sag .tn-mega-panel:nth-of-type(4),
.tn-mega-radio:nth-of-type(5):checked ~ .tn-mega-govde .tn-mega-sag .tn-mega-panel:nth-of-type(5),
.tn-mega-radio:nth-of-type(6):checked ~ .tn-mega-govde .tn-mega-sag .tn-mega-panel:nth-of-type(6){
  display:block;
}

/* Dar ekran: tek kolon (sol liste ustte yatay kaydirilir) */
@media (max-width:900px){
  .tn-mega{ width:calc(100vw - 24px) }
  .tn-mega-govde{ grid-template-columns:1fr; min-height:0 }
  .tn-mega-sol{
    flex-direction:row; overflow-x:auto; border-right:0;
    border-bottom:1px solid var(--border, #e8eaee); padding:10px;
    scrollbar-width:none;
  }
  .tn-mega-sol::-webkit-scrollbar{ display:none }
  .tn-mega-sekme{ white-space:nowrap; font-size:13px; padding:8px 11px }
  .tn-mega-tumu{ margin-top:0 }
  .tn-mega-izgara{ grid-template-columns:1fr }
}