/* =========================================================
   Topel-Theme — main.css (GLOBAL ONLY)
   Scope: root / base / btn / container / header / footer
   ========================================================= */

/* ===== Root Vars ===== */
:root{
  /* Brand */
  --top-red: #d1121f;
  --top-black: #0b0b0f;

  /* Surfaces */
  --top-bg: #f5f6f7;
  --top-surface: #ffffff;

  /* Text */
  --top-text: #0f172a;
  --top-muted: #64748b;

  /* UI */
  --top-border: rgba(15, 23, 42, .10);
  --top-shadow: 0 10px 30px rgba(2, 6, 23, .08);
  --top-radius: 16px;

  /* Typography */
  --top-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --top-line: 1.6;

  /* Layout */
  --top-container: 1200px;
  --top-gutter: 16px;

  /* Header */
  --top-header-h: 76px;
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--top-font);
  line-height:var(--top-line);
  color:var(--top-text);
  background:var(--top-bg);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

:focus-visible{
  outline:3px solid rgba(209, 18, 31, .35);
  outline-offset:3px;
}

/* =========================================
   Sticky Footer Layout (Global)
========================================= */
html, body { height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* header.php'de açılan main */
#content{
  flex: 1 0 auto;
}

/* footer en altta kalsın */
#top-footer{
  margin-top: auto;
}


/* ===== Container ===== */
.top-container{
  width:min(var(--top-container), 100% - (var(--top-gutter) * 2));
  margin-inline:auto;
}

/* ===== Buttons (a tag) ===== */
.top-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  line-height:1;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
  user-select:none;
  white-space:nowrap;
}
.top-btn:hover{ transform: translateY(-1px); box-shadow: var(--top-shadow); }
.top-btn:active{ transform: translateY(0); box-shadow:none; }

.top-btn--primary{
  background:var(--top-red);
  color:#fff;
}
.top-btn--primary:hover{ opacity:.95; }

.top-btn--dark{
  background:var(--top-black);
  color:#fff;
}
.top-btn--dark:hover{ opacity:.95; }

.top-btn--ghost{
  background:transparent;
  color:var(--top-text);
  border-color:var(--top-border);
}
.top-btn--ghost:hover{
  border-color:rgba(209, 18, 31, .35);
}

/* ===== Header + Nav + Drawer (GLOBAL) ===== */

.top-skip{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.top-skip:focus{
  position:fixed; left:16px; top:16px;
  width:auto; height:auto; padding:10px 12px;
  background:#fff; border:1px solid var(--top-border);
  border-radius:12px; z-index:2000;
}

.top-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--top-border);
  transition: box-shadow .2s ease, background .2s ease;
  padding-right: env(safe-area-inset-right);
  padding-left:  env(safe-area-inset-left);
}
.top-header--scrolled{
  box-shadow: 0 14px 40px rgba(2, 6, 23, .10);
  background:rgba(255,255,255,.96);
}

.top-header__inner{
  height:var(--top-header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* Brand */
.top-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}
.top-brand .custom-logo-link{ display:inline-flex; }
.top-brand .custom-logo{ height:44px; width:auto; }
.top-brand__logo{ height:44px; width:auto; }

.top-brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.top-brand__name{ font-size:15px; letter-spacing:.2px; }
.top-brand__tag{ font-size:12px; color:var(--top-muted); margin-top:4px; }

/* Desktop nav */
.top-nav{ display:none; }
.top-nav__list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
}
.top-nav__list > li{ position:relative; }
.top-nav__list a{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  color:var(--top-text);
  font-weight:600;
  transition: background .15s ease, color .15s ease;
}
.top-nav__list a:hover{
  background: rgba(209, 18, 31, .08);
  color: var(--top-black);
}
.top-nav__list .current-menu-item > a,
.top-nav__list .current_page_item > a{
  background: rgba(15, 23, 42, .06);
}

/* Dropdown (2nd level) */
.top-nav__list .sub-menu{
  position:absolute;
  left:0;
  top:calc(100% + 10px);
  min-width:220px;
  list-style:none;
  margin:0;
  padding:10px;
  background:var(--top-surface);
  border:1px solid var(--top-border);
  border-radius:14px;
  box-shadow: var(--top-shadow);
  display:none;
}
.top-nav__list li:hover > .sub-menu{ display:block; }
.top-nav__list .sub-menu a{
  width:100%;
  border-radius:12px;
  padding:10px 12px;
}

/* Desktop CTA */
.top-header__cta{ display:none; align-items:center; gap:10px; }

/* Mobile controls */
.top-header__mobile{ display:flex; align-items:center; gap:10px; }

.top-iconbtn{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:1px solid var(--top-border);
  background:rgba(255,255,255,.75);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.top-iconbtn:hover{
  transform: translateY(-1px);
  background: rgba(209, 18, 31, .06);
  border-color: rgba(209, 18, 31, .30);
}
.top-iconbtn--wa:hover{ background: rgba(37, 211, 102, .10); border-color: rgba(37, 211, 102, .25); }

.top-burger{
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid var(--top-border);
  background:var(--top-black);
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .15s ease, opacity .15s ease;
}
.top-burger:hover{ transform: translateY(-1px); opacity:.95; }
.top-burger__bars{
  width:18px; height:12px;
  position:relative;
  display:block;
}
.top-burger__bars::before,
.top-burger__bars::after,
.top-burger__bars{
  background:transparent;
}
.top-burger__bars::before,
.top-burger__bars::after{
  content:"";
  position:absolute; left:0; right:0;
  height:2px;
  background:#fff;
  border-radius:2px;
}
.top-burger__bars::before{ top:1px; }
.top-burger__bars::after{ bottom:1px; }

/* Drawer */
.top-drawer{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
}

/* ✅ Open via :target (no dependency) */
.top-drawer:target{
  display:block;
}

/* Overlay */
.top-drawer__overlay{
  position:absolute;
  inset:0;
  background:rgba(2, 6, 23, .55);
}

/* Panel */
.top-drawer__panel{
  position:absolute;
  top:0; right:0;
  width:min(360px, 92vw);
  height:100%;
  background:var(--top-surface);
  border-left:1px solid var(--top-border);
  box-shadow: var(--top-shadow);
  transform: translateX(100%);
  transition: transform .22s ease;
  display:flex;
  flex-direction:column;
}

.top-drawer:target .top-drawer__panel{
  transform: translateX(0);
}

/* ✅ Scroll lock (JS sadece class ekleyecek) */
html.top-drawer-open,
body.top-drawer-open{
  overflow:hidden;
}

/* Burger link gibi görünmesin + mobil tap */
.top-burger{
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color: transparent;
}



/* Scroll lock */
html.top-drawer-open,
body.top-drawer-open{
  overflow:hidden;
}

/* Overlay */
.top-drawer__overlay{
  position:absolute;
  inset:0;
  background:rgba(2, 6, 23, .55);
}

/* Panel */
.top-drawer__panel{
  position:absolute;
  top:0; right:0;
  width:min(360px, 92vw);
  height:100%;
  background:var(--top-surface);
  border-left:1px solid var(--top-border);
  box-shadow: var(--top-shadow);
  transform: translateX(100%);
  transition: transform .22s ease;
  display:flex;
  flex-direction:column;
}



.top-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--top-border);
}

.top-drawer__title{
  font-weight:800;
  letter-spacing:.2px;
}

.top-drawer__nav{
  padding:10px 10px 0;
  overflow:auto;
}

.top-drawer__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.top-drawer__list a{
  display:flex;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--top-border);
  background: rgba(15, 23, 42, .02);
  font-weight:700;
}

.top-drawer__list a:hover{
  border-color: rgba(209, 18, 31, .30);
  background: rgba(209, 18, 31, .06);
}



/* Label burger tap/keyboard */
.top-burger{
  cursor:pointer;
  user-select:none;
}
.top-burger:focus{
  outline: 2px solid rgba(209,18,31,.35);
  outline-offset: 3px;
}


/* Mobilde alt menüleri şimdilik gizli tutuyoruz */
.top-drawer__list .sub-menu{ display:none; }

/* Drawer CTA */
.top-drawer__cta{
  margin-top:auto;
  padding:14px;
  display:flex;
  gap:10px;
  flex-direction:column;
  border-top:1px solid var(--top-border);
}

/* Desktop breakpoint */
@media (min-width: 992px){
  .top-header__mobile{ display:none; }
  .top-nav{ display:block; }
  .top-header__cta{ display:flex; }
  .top-brand__tag{ display:block; }
}

/* ===== Mobile header fixes (alignment + tap) ===== */
.top-header__inner{ position:relative; }

.top-header__mobile{
  margin-left:auto;              /* sağa yasla */
  position:relative;
  z-index:1100;                  /* olası üst katmanlara karşı */
  pointer-events:auto;
}

.top-burger{
  cursor:pointer;
  pointer-events:auto;
  touch-action:manipulation;     /* mobil tap için */
  -webkit-tap-highlight-color: transparent;
  position:relative;
  z-index:1101;
}

/* Mobilde logo alanı header'ı itmesin */
@media (max-width: 520px){
  .top-brand{ min-width:0; flex: 0 1 auto; }
  .top-brand__logo{ height:40px; width:auto; }

  /* ikonlar biraz küçülsün, sağ boşluk daha dengeli olsun */
  .top-iconbtn{ width:38px; height:38px; }
  .top-burger{ width:42px; height:42px; }

  /* container'ın sağ/sol boşluğu (gutter) biraz artsın */
  :root{ --top-gutter: 14px; }
}



/* ===== Footer (basic shell) ===== */
.top-footer{
  background:var(--top-black);
  color:#e5e7eb;
  padding:56px 0;
}
.top-footer a{ color:inherit; opacity:.95; }
.top-footer a:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px; }

/* ===== Helpers (global ok) ===== */
.top-muted{ color:var(--top-muted); }
.top-card{
  background:var(--top-surface);
  border:1px solid var(--top-border);
  border-radius:var(--top-radius);
  box-shadow: var(--top-shadow);
}

/* ✅ CSS-only drawer open via :target (JS bağımsız) */
.top-drawer:target{
  display:block;
}

.top-drawer:target .top-drawer__panel{
  transform: translateX(0);
}

/* (İsteğe bağlı) burger link gibi görünmesin */
.top-burger{
  text-decoration:none;
}

/* =========================================
   Footer — Global (assets/css/main.css)
========================================= */
.top-footer{
  background:#0f0f10;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
  padding: clamp(26px, 4vw, 48px) 0 14px;
}

.top-footer__grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: clamp(18px, 3vw, 34px);
  align-items:start;
}

.top-footer__title{
  margin:0 0 12px;
  font-size: 14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
}

.top-footer__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.top-footer__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.88);
  text-decoration:none;
}
.top-footer__link:hover{ color:#fff;  text-decoration:none; }

.top-footer__addr{
  display:flex;
  gap:10px;
  color:rgba(255,255,255,.78);
  line-height:1.5;
}

.top-footer__social{
  display:flex;
  gap:10px;
  margin-top:14px;
}

.top-footer__soc{
  width:38px;
  height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  text-decoration:none;
}
.top-footer__soc:hover{
  background:rgba(230,0,0,.18);
  border-color:rgba(230,0,0,.35);
}

.top-footerMenu{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.top-footerMenu a{
  color:rgba(255,255,255,.85);
  text-decoration:none;
}
.top-footerMenu a:hover{ color:#fff;  text-decoration:none; }

.top-footer__posts{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.top-footer__postLink{
  color:rgba(255,255,255,.85);
  text-decoration:none;
  line-height:1.45;
}
.top-footer__postLink:hover{
  color:#fff;
  text-decoration:none;
  text-underline-offset:3px;
}
.top-footer__muted{ color:rgba(255,255,255,.6); }

.top-footer__bar{
  margin-top: clamp(18px, 3vw, 28px);
  padding-top: 14px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.72);
  font-size:13px;
}

.top-footer__sigLink{
  color:#4aa3ff; /* mavi imza */
  font-weight:800;
  text-decoration:none;
}
.top-footer__sigLink:hover{
  color:#78c0ff;
  opacity:.95;
}

/* Footer içinde hover underline'ı komple kapat */
.top-footer a,
.top-footer a:hover,
.top-footer a:focus,
.top-footer a:active{
  text-decoration: none !important;
}

/* =========================================
   Back To Top (Global)
========================================= */
.top-backTop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  width: 46px;
  height: 46px;
  border-radius: 14px;

  display: grid;
  place-items: center;

  background: rgba(230, 0, 0, .92); /* Topel kırmızı */
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);

  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.top-backTop:hover{
  opacity: 1;
  transform: translateY(0);
}

.top-backTop.is-show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mobilde biraz küçült */
@media (max-width: 640px){
  .top-backTop{
    width: 42px;
    height: 42px;
    right: 14px;
    bottom: 14px;
    border-radius: 12px;
  }
}



/* Responsive */
@media (max-width: 900px){
  .top-footer__grid{ grid-template-columns: 1fr; }
}