/* Ortak site kabuğu (18.10.2026): eski tabanlı herkese açık sayfalarda (front_end/base/main.html) landing'in üst çubuğu ve alt
   bilgisi. Kaynak kurallar yeni_ana_sayfa.css (üst çubuk, ülke seçici, alt bilgi) + uzun_menu.css'tir; burada .yk altında
   kapsamlıdır, böylece eski tema (style.css: .btn, a:hover, h4 …) ne kabuğu bozar ne kabuktan etkilenir. Landing'de değişen
   üst çubuk / alt bilgi kuralını buraya da işleyin. Yapı: front_end/home/parca/_kabuk_ust.html, _kabuk_alt.html. */
.yk{
  --bg:#ffffff; --ink:#151b23; --muted:#5b6571; --hair:#e5e8ed; --wash:#f5f7fa;
  --accent:#005cd8; --accent-wash:#eaf2fd; --warn:#8a5200; --warn-wash:#fff3e0;
  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gut:clamp(16px, 4vw, 48px); --max:1180px;
  display:contents;
}
.yk *, .yk *::before, .yk *::after{box-sizing:border-box}
.yk :where(a,button,summary):focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.yk .sar{max-width:var(--max); margin-inline:auto}
.yk .mono{font-family:var(--f-mono); font-size:.86em}

/* ---------- Üst çubuk ---------- */
/* :not(#yk): eski temanın .btn:not(.close):not(.mfp-close)… kuralları (büyük harf, 32 px yükseklik) sınıf özgüllüğüyle yenilemiyor */
.yk .ust{position:sticky; top:env(safe-area-inset-top,0px); z-index:950; background:var(--bg); padding-inline:var(--gut); border-bottom:1px solid var(--hair);
  font-family:var(--f-body); font-size:16px; line-height:1.6; color:var(--ink); -webkit-font-smoothing:antialiased; text-align:start}
.yk .ust .sar{display:flex; align-items:center; gap:28px; min-height:64px; position:relative}
.yk .marka{flex-shrink:0; display:inline-flex; align-items:baseline; text-decoration:none}
.yk .marka .marka-logo{display:block; height:28px; width:auto; max-width:none}
.yk nav.menu{display:flex; gap:24px; font-size:14.5px; margin-right:auto}
.yk nav.menu a[hidden]{display:none}
.yk nav.menu a{color:var(--muted); text-decoration:none; padding-block:6px; white-space:nowrap; font-weight:400}
.yk nav.menu a:hover{color:var(--ink)}
.yk .ust-sag{display:flex; align-items:center; gap:10px; margin-left:auto}
.yk .btn:not(#yk){display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 16px; border-radius:999px; font:600 14px/1 var(--f-body);
  text-decoration:none; border:1px solid var(--ink); cursor:pointer; white-space:nowrap; text-transform:none; letter-spacing:normal; box-shadow:none; margin:0; width:auto; height:auto}
.yk .btn.ana:not(#yk){background:var(--ink); color:var(--bg)}
.yk .btn.sade:not(#yk){border-color:transparent; background:transparent; color:var(--ink); padding:0 12px}
@media (hover:hover){ .yk .btn.ana:not(#yk):hover{background:var(--accent); border-color:var(--accent); color:var(--bg)} .yk .btn.sade:not(#yk):hover{color:var(--accent)} }
@media (max-width:1500px){ .yk nav.menu{gap:18px} }
@media (max-width:1279px){ .yk .ust .ust-teklif:not(#yk){display:none} }
@media (max-width:900px){ .yk nav.menu{display:none} }
@media (max-width:600px){
  .yk .ust .btn.sade:not(#yk){display:none}
  .yk .ust .sar{gap:10px}
  .yk .ust-sag{gap:6px; min-width:0}
  .yk .ust .btn.ana:not(#yk){min-width:0; flex-shrink:1; white-space:normal; text-align:center; line-height:1.15; padding:0 12px}
}
@media (max-width:520px){ .yk .marka .marka-logo{height:23px} }

/* ---------- "Ürünler" menüsü (uzun_menu.css'in kapsamlı eşi) ---------- */
.yk .uz-menu{position:static}
.yk .uz-menu > summary{list-style:none; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 4px; font-size:14.5px; color:var(--ink); cursor:pointer; white-space:nowrap; font-weight:500}
.yk .uz-menu > summary::-webkit-details-marker{display:none}
.yk .uz-menu-panel{font-family:var(--f-body); line-height:1.5}
/* eski tema section'a 80/40 px dolgu ve taşma gizleme veriyordu: telefonda Ürünler/Çözümler listeleri görünmüyordu */
.yk .uz-menu-panel{align-content:start; grid-auto-rows:max-content}
.yk .uz-menu-panel section{padding:0; margin:0; overflow:visible; height:auto; min-height:auto; background:none; position:static}
.yk .uz-menu-panel h2{font-family:var(--f-body); line-height:1.4}
.yk .uz-menu-panel ul{list-style:none; margin:0; padding:0}
.yk .uz-menu-panel li{margin:0; padding:0}
.yk .uz-menu-panel li a{display:block; padding:8px 0; text-decoration:none; color:var(--ink)}
.yk .uz-menu-panel li a:hover b{color:var(--accent)}
.yk .ust .sar > nav.menu:has(~ .uz-menu){margin-right:0}
.yk nav.menu ~ .uz-menu{margin-inline-end:auto}

/* ---------- Ülke seçici ---------- */
.yk .ulke-sec{position:relative; font-family:var(--f-body)}
.yk .ulke-sec > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 14px; border:1px solid var(--hair); border-radius:999px; background:var(--bg); color:var(--ink); font-size:14px; font-weight:500; line-height:1.2; white-space:nowrap}
.yk .ulke-sec > summary::-webkit-details-marker{display:none}
.yk .ulke-sec > summary::after{content:"▾"; font-size:11px; opacity:.6}
.yk .ulke-sec > summary .ok{display:none}
.yk .ulke-sec > summary .b{font-size:16px; line-height:1}
.yk .ulke-sec > summary:hover, .yk .ulke-sec[open] > summary{border-color:var(--accent); color:var(--accent)}
.yk .ulke-menu{position:absolute; z-index:40; top:calc(100% + 8px); right:0; width:300px; max-width:calc(100vw - 32px); max-height:min(70vh, 460px); overflow:auto; background:var(--bg); border:1px solid var(--hair); border-radius:14px; box-shadow:0 16px 40px rgba(21,27,35,.14); padding:8px; text-align:left}
.yk .ulke-menu .ulke-not{margin:4px 8px 8px; font-size:12.5px; line-height:1.45; color:var(--muted)}
.yk .ulke-menu a{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; color:var(--ink); font-size:13.5px; font-weight:500; line-height:1.35; text-decoration:none}
.yk .ulke-menu a:hover, .yk .ulke-menu a:focus-visible{background:var(--wash); color:var(--ink)}
.yk .ulke-menu a[aria-current="true"]{background:var(--accent-wash); color:var(--accent)}
.yk .ulke-menu a .b{font-size:17px; width:22px; text-align:center}
.yk .ulke-menu a small{margin-left:auto; color:var(--muted); font-size:11.5px; font-weight:400}
.yk .ulke-menu .ulke-ad{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.yk .ulke-menu .ulke-grup-bas{margin:10px 10px 4px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.yk .ulke-menu .ulke-grup{border-top:1px solid var(--hair); margin-top:6px; padding-top:4px}
.yk .ulke-menu .ulke-grup > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; min-height:36px; padding:8px 10px; border-radius:9px; font-size:12.5px; font-weight:600; color:var(--ink)}
.yk .ulke-menu .ulke-grup > summary::-webkit-details-marker{display:none}
.yk .ulke-menu .ulke-grup > summary::after{content:"▾"; margin-left:auto; font-size:11px; opacity:.6}
.yk .ulke-menu .ulke-grup > summary i{display:none}
.yk .ulke-menu .ulke-grup > summary:hover{background:var(--wash)}
.yk .ulke-menu .ulke-grup > summary small{font-weight:500; color:var(--muted)}
.yk .ulke-menu a small.ulke-rozet{flex:none; font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:999px; background:var(--wash); color:var(--muted)}
.yk .ulke-menu a small.ulke-rozet--lei{background:#eef2f8; color:#3d5476}
.yk .ulke-menu a small.ulke-rozet--bekleyen{background:var(--warn-wash); color:var(--warn)}
@media (pointer:coarse){ .yk .ulke-menu a{min-height:44px} .yk .ulke-sec > summary{min-height:44px} }
@media (max-width:600px){
  .yk .ulke-sec > summary{padding:0 11px}
  .yk .ulke-sec > summary span:not(.b){display:none}
  .yk .ulke-menu{position:fixed; top:calc(env(safe-area-inset-top,0px) + 72px); left:16px; right:16px; width:auto; max-width:none; max-height:65vh}
}

/* ---------- Alt bilgi ---------- */
.yk-alt-ic{display:block; background:var(--bg); padding-inline:var(--gut); font-family:var(--f-body); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; text-align:start}
.yk footer.alt{max-width:var(--max); margin-inline:auto; border-top:1px solid var(--ink); padding-block:36px 40px; display:grid; grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr)); gap:28px 40px; font-size:14px}
.yk footer.alt p{margin:10px 0 0; color:var(--muted); max-width:36ch; font-size:14px; line-height:1.6}
.yk footer.alt :is(h2.alt-bas,h4){margin:0 0 10px; padding:0; font-family:var(--f-body); font-size:11.5px; line-height:1.4; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600}
.yk footer.alt ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.yk footer.alt li{margin:0; padding:0; line-height:1.6}
.yk footer.alt a{color:var(--ink); text-decoration:none}
.yk footer.alt a:hover{color:var(--accent); text-decoration:underline}
.yk .marka-logo{display:block; height:28px; width:auto; max-width:none}
.yk .telif{grid-column:1 / -1; display:flex; justify-content:space-between; gap:8px 24px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--hair); font-size:12.5px; color:var(--muted)}
@media (max-width:900px){ .yk footer.alt{grid-template-columns:repeat(2,minmax(0,1fr))} .yk footer.alt > div:first-child{grid-column:1 / -1} }