/* ============================================================
   Ölüdeniz Pilot Rehberi - Tasarım Sistemi
   Tüm sayfalar bu tek stil dosyasını kullanır.
   ============================================================ */

/* --- 1. Tokenlar ------------------------------------------- */
:root {
  /* Renk */
  --ink:        #0B1F2A;
  --ink-2:      #234A5F;
  --ink-3:      #5B7686;
  --sea:        #0B6E7A;
  --sea-dark:   #084E57;
  --sea-bright: #12A0AE;
  --sky:        #1F7FC4;
  --sand:       #F6F1E7;
  --paper:      #FFFFFF;
  --surface:    #F5F8FA;
  --surface-2:  #EAF1F5;
  --line:       #D9E3EA;
  --line-soft:  #EDF2F5;

  --warn-bg:    #FFF7ED;  --warn-ink: #9A3412;  --warn-line: #FDBA74;
  --danger-bg:  #FEF2F2;  --danger-ink:#B42318; --danger-line:#FCA5A5;
  --ok-bg:      #ECFDF5;  --ok-ink:   #15803D;  --ok-line:   #86EFAC;
  --info-bg:    #EFF6FF;  --info-ink: #1D4ED8;  --info-line: #93C5FD;
  --todo-bg:    #FEF3C7;  --todo-ink: #854D0E;

  /* Tipografi */
  --font-head: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  /* Ölçü */
  --wrap: 1180px;
  --wrap-narrow: 820px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --header-h: 68px;

  --shadow-sm: 0 1px 2px rgba(11,31,42,.06), 0 1px 3px rgba(11,31,42,.05);
  --shadow:    0 2px 6px rgba(11,31,42,.06), 0 8px 24px rgba(11,31,42,.07);
  --shadow-lg: 0 10px 40px rgba(11,31,42,.14);
}

/* --- 2. Temel --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, h5 { font-family: var(--font-head); font-weight: 700; line-height: 1.18; color: var(--ink); letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); }
h4 { font-size: 1.08rem; }

p { max-width: 72ch; }
a { color: var(--sea); text-decoration: none; }
a:hover { color: var(--sea-bright); text-decoration: underline; }
strong { font-weight: 650; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-inline-start: 1.35em; }
li { margin-bottom: .4em; }
code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-2); padding: .12em .38em; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible { outline: 3px solid var(--sea-bright); outline-offset: 2px; border-radius: 3px; }

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { inset-inline-start: 0; }

/* --- 3. Düzen --------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 22px; }
.section { padding: 68px 0; }
.section--tight { padding: 44px 0; }
.section--surface { background: var(--surface); }
.section--sand { background: var(--sand); }
.section--ink { background: var(--ink); color: #E5EEF3; }
.section--ink h2, .section--ink h3 { color: #fff; }

.section-head { margin-bottom: 34px; max-width: 780px; }
.section-head .eyebrow {
  display: inline-block; font-family: var(--font-head); font-weight: 600;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sea); margin-bottom: 10px;
}
.section-head p { color: var(--ink-2); margin-top: 12px; }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* --- 4. Başlık ve gezinme --------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.6) blur(8px);
  -webkit-backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 22px;
  height: var(--header-h); display: flex; align-items: center; gap: 20px;
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand svg { width: 34px; height: 34px; flex-shrink: 0; }
.brand-logo { height: 46px; width: auto; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); letter-spacing: .055em; text-transform: uppercase;
}
.brand-name b { font-weight: 600; }
.brand-sub { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

.nav { margin-inline-start: auto; }
.nav > ul { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; }
.nav > ul > li { position: relative; margin: 0; }
.nav-link {
  display: flex; align-items: center; gap: 5px;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  color: var(--ink); white-space: nowrap; background: none; border: 0; cursor: pointer;
  font-family: var(--font-head);
}
.nav-link:hover { background: var(--surface-2); color: var(--sea); text-decoration: none; }
.nav-link[aria-current="page"], .nav-link.is-active { color: var(--sea); }
.nav-link .chev { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); transition: transform .18s; }
.nav-link[aria-expanded="true"] .chev { transform: rotate(-135deg) translate(-1px,-1px); }

.submenu {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; min-width: 250px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 8px; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .16s ease;
}
.nav-item.is-open .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu li { margin: 0; }
.submenu a {
  display: block; padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--ink); font-size: .92rem; font-weight: 500;
}
.submenu a:hover { background: var(--surface); color: var(--sea); text-decoration: none; }
.submenu a small { display: block; color: var(--ink-3); font-size: .76rem; font-weight: 400; margin-top: 1px; }

.nav-cta {
  background: var(--sea); color: #fff !important; padding: 10px 16px; border-radius: var(--r-sm);
  font-family: var(--font-head); font-weight: 600; font-size: .93rem; white-space: nowrap;
}
.nav-cta:hover { background: var(--sea-dark); text-decoration: none; }

.menu-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; margin-inline-start: auto; }
.menu-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }
.menu-toggle span + span { margin-top: 5px; }

@media (max-width: 1239px) {
  .menu-toggle { display: block; }
  /* backdrop-filter, içindeki position:fixed menü için containing block yaratır.
     Off-canvas panelin viewport'a göre konumlanabilmesi için mobilde kapatılır. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
  .nav {
    position: fixed;
    top: var(--header-h); inset-inline-end: 0; bottom: 0; inset-inline-start: auto;
    width: min(360px, 88vw);
    background: var(--paper); border-inline-start: 1px solid var(--line);
    overflow-y: auto; padding: 14px 16px 60px;
    transform: translateX(102%); margin-inline-start: 0;
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  .nav.is-open {
    transform: translateX(0); visibility: visible;
    transition: transform .22s ease, visibility 0s;
    box-shadow: var(--shadow-lg);
  }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-link { width: 100%; justify-content: space-between; padding: 13px 12px; font-size: 1.02rem; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 8px 12px; margin: 0;
    display: none; min-width: 0;
  }
  .nav-item.is-open .submenu { display: block; }
  .nav-cta { display: block; text-align: center; margin-top: 14px; padding: 14px 16px; }
}

/* --- 5. Düğmeler ------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  padding: 13px 24px; border-radius: var(--r-sm); border: 1.5px solid transparent;
  cursor: pointer; transition: background .16s, color .16s, border-color .16s;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--sea); color: #fff; }
.btn--primary:hover { background: var(--sea-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--sea); color: var(--sea); background: var(--paper); }
.btn--light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(4px); }
.btn--light:hover { background: #fff; color: var(--ink); }
.btn--sm { padding: 9px 16px; font-size: .9rem; }

/* --- 6. Hero ---------------------------------------------- */
.hero { position: relative; color: #fff; isolation: isolate; }
.hero img.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,31,42,.72) 0%, rgba(11,31,42,.55) 45%, rgba(11,31,42,.86) 100%);
}
.hero-inner { max-width: var(--wrap); margin: 0 auto; padding: 92px 22px 76px; }
.hero h1 { color: #fff; max-width: 17ch; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.hero .lede { font-size: 1.12rem; max-width: 60ch; margin-top: 18px; color: #DCE9EF; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  padding: 6px 14px; border-radius: 100px; backdrop-filter: blur(4px);
  font-family: var(--font-head); font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Hızlı gerçekler şeridi */
.factbar { background: var(--ink); color: #fff; }
.factbar-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 22px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.fact { padding: 22px 18px; border-inline-start: 1px solid rgba(255,255,255,.13); }
.fact:first-child { border-inline-start: 0; padding-inline-start: 0; }
.fact dt { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #8FB2C0; font-weight: 600; }
.fact dd { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; margin-top: 4px; color: #fff; }
.fact dd small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .8rem; color: #A9C4CF; letter-spacing: 0; margin-top: 2px; }
@media (max-width: 780px) {
  .factbar-inner { grid-template-columns: repeat(2, 1fr); }
  .fact { border-inline-start: 0; border-top: 1px solid rgba(255,255,255,.13); padding: 16px 0; }
  .fact:nth-child(2n) { padding-inline-start: 18px; border-inline-start: 1px solid rgba(255,255,255,.13); }
  .fact:nth-child(-n+2) { border-top: 0; }
}

/* --- 7. Kartlar ------------------------------------------- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px; transition: border-color .18s, box-shadow .18s, transform .18s;
  display: flex; flex-direction: column;
}
a.card { color: inherit; }
a.card:hover { border-color: var(--sea); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-2); font-size: .96rem; flex-grow: 1; }
.card .card-meta {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-family: var(--font-head); font-weight: 600; font-size: .87rem; color: var(--sea);
  display: flex; align-items: center; gap: 6px;
}
.card-icon {
  width: 42px; height: 42px; border-radius: 10px; background: var(--surface-2);
  display: grid; place-items: center; margin-bottom: 14px; color: var(--sea); flex-shrink: 0;
}
.card-icon svg { width: 22px; height: 22px; }

/* Numaralı adım kartı */
.step { display: flex; gap: 18px; align-items: flex-start; }
.step-num {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--sea); color: #fff; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
}
.step h3 { font-size: 1.12rem; margin-bottom: 5px; }
.step p { font-size: .95rem; color: var(--ink-2); }

/* --- 8. Bilgi kutuları ------------------------------------ */
.note {
  border-inline-start: 4px solid var(--info-line); background: var(--info-bg);
  padding: 16px 20px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 22px 0;
}
.note > :last-child { margin-bottom: 0; }
.note-title {
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--info-ink);
}
.note p, .note li { font-size: .95rem; color: var(--ink-2); max-width: none; }
.note--warn   { background: var(--warn-bg);   border-color: var(--warn-line); }
.note--warn   .note-title { color: var(--warn-ink); }
.note--danger { background: var(--danger-bg); border-color: var(--danger-line); }
.note--danger .note-title { color: var(--danger-ink); }
.note--ok     { background: var(--ok-bg);     border-color: var(--ok-line); }
.note--ok     .note-title { color: var(--ok-ink); }

/* Doğrulama bekleyen içerik işareti */
.todo {
  display: inline-block; background: var(--todo-bg); color: var(--todo-ink);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  padding: 2px 7px; border-radius: 4px; letter-spacing: .04em;
  border: 1px dashed rgba(133,77,14,.4);
}

/* --- 9. Tablolar ------------------------------------------ */
.table-scroll { overflow-x: auto; margin: 22px 0; -webkit-overflow-scrolling: touch; border-radius: var(--r); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; background: var(--paper); }
thead th {
  background: var(--surface); text-align: start; padding: 12px 15px;
  font-family: var(--font-head); font-weight: 700; font-size: .84rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: 12px 15px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface); }
th[scope="row"] { font-weight: 650; text-align: start; padding: 12px 15px; border-bottom: 1px solid var(--line-soft); }

/* --- 10. Rozet -------------------------------------------- */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  background: var(--surface-2); color: var(--ink-2);
}
.badge--sea { background: #E0F2F4; color: var(--sea-dark); }
.badge--warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge--danger { background: var(--danger-bg); color: var(--danger-ink); }
.badge--ok { background: var(--ok-bg); color: var(--ok-ink); }

/* --- 11. Ekmek kırıntısı ve içindekiler ------------------- */
.breadcrumb { font-size: .85rem; color: var(--ink-3); padding: 16px 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.breadcrumb li { margin: 0; display: flex; gap: 8px; align-items: center; }
.breadcrumb li + li::before { content: '/'; color: var(--line); }

.toc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 24px; margin: 28px 0;
}
.toc h2 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.toc ol { columns: 2; column-gap: 32px; padding-inline-start: 1.2em; font-size: .93rem; }
@media (max-width: 620px) { .toc ol { columns: 1; } }

/* --- 12. Alt bilgi ---------------------------------------- */
.site-footer { background: var(--ink); color: #A9C4CF; padding: 56px 0 28px; margin-top: 0; }
.site-footer h4 { color: #fff; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer a { color: #C8DBE4; font-size: .93rem; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.footer-brand p { font-size: .92rem; margin-top: 12px; max-width: 40ch; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: .84rem; color: #7F9DAB;
}
.disclaimer {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r); padding: 16px 20px; margin-bottom: 34px;
  font-size: .88rem; color: #B7CFD9;
}
.disclaimer strong { color: #fff; }

/* --- 13. Yardımcılar -------------------------------------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.muted { color: var(--ink-3); }
.small { font-size: .88rem; }
.stack > * + * { margin-top: 1rem; }
.updated { font-size: .84rem; color: var(--ink-3); font-family: var(--font-mono); }

/* --- 14. İç sayfa başlığı ve metin akışı ------------------ */
.page-head {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 6px 0 44px;
}
.page-head h1 { max-width: 22ch; }
.page-head .lede { font-size: 1.08rem; color: var(--ink-2); margin-top: 14px; max-width: 66ch; }
.page-head .updated { margin-top: 18px; display: block; }

.prose > * + * { margin-top: 1.05rem; }
.prose h2 { margin-top: 2.7rem; }
.prose h3 { margin-top: 1.9rem; }
.prose h2 + p, .prose h3 + p { margin-top: .7rem; }
.prose ul, .prose ol { margin-top: .8rem; }
.prose img { border-radius: var(--r); margin: 1.6rem 0; }
.prose figure { margin: 1.8rem 0; }
.prose figcaption { font-size: .87rem; color: var(--ink-3); margin-top: 8px; }

/* --- 15. Kalkış ve iniş noktası blokları ------------------ */
.spot { border-top: 3px solid var(--sea); padding-top: 26px; margin-top: 54px; }
.spot:first-of-type { margin-top: 0; }
.spot-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.spot-head h2 { margin: 0 !important; }
.spot h3 { font-size: 1.12rem; margin-top: 1.8rem; }
.spot .table-scroll { margin: 20px 0; }

/* Dikey veri tablosu: sol sütun etiket, sağ sütun değer */
.spec th { width: 38%; background: var(--surface); font-weight: 600; color: var(--ink-2); }
@media (max-width: 560px) { .spec th { width: 45%; } }

/* Rüzgar yönü göstergesi */
.wind-ok { color: var(--ok-ink); font-weight: 600; }
.wind-no { color: var(--danger-ink); font-weight: 600; }

/* İç sayfa okuma sütunu: başlık, ekmek kırıntısı ve metin aynı genişlikte hizalanır */
.wrap-page { max-width: 940px; }
.prose { margin-left: auto; margin-right: auto; }

/* --- 16. Şema ve diyagramlar ------------------------------ */
.diagram {
  margin: 28px 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  overflow-x: auto;
}
.diagram svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.diagram figcaption {
  font-size: .88rem; color: var(--ink-3); margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--line-soft); text-align: center;
}
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin-top: 16px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; color: var(--ink-2); }
.legend i { width: 22px; height: 3px; border-radius: 2px; flex-shrink: 0; }

/* --- 17. Fotoğraf üzerine çizim --------------------------- */
.photo-diagram { margin: 28px 0; }
.photo-wrap {
  position: relative; max-width: 720px; margin: 0 auto;
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
}
.photo-wrap img { display: block; width: 100%; height: auto; }
.photo-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- 18. Canlı rüzgar paneli ------------------------------ */
.ist-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.ist {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px; border-inline-start-width: 5px;
}
.ist--ok     { border-inline-start-color: #16A34A; }
.ist--sinir  { border-inline-start-color: #D97706; }
.ist--kapali { border-inline-start-color: #DC2626; }
.ist--yok    { border-inline-start-color: var(--line); }

.ist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.ist-head h3 { font-size: 1.12rem; margin: 0; }
.ist-zaman { font-size: .78rem; color: var(--ink-3); font-family: var(--font-mono); }

.ist-anlik { display: flex; align-items: center; gap: 18px; margin: 16px 0 6px; }
.ist-pusula { width: 74px; height: 74px; flex-shrink: 0; }
.ist-degerler { display: flex; gap: 22px; flex-wrap: wrap; }
.ist-deger .etiket {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.ist-deger .sayi { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; line-height: 1.1; }
.ist-deger .birim { font-size: .82rem; color: var(--ink-3); font-weight: 400; }

.ist-durum {
  display: inline-block; padding: 3px 11px; border-radius: 100px;
  font-family: var(--font-head); font-weight: 600; font-size: .78rem; white-space: nowrap;
}
.ist-durum--ok     { background: #DCFCE7; color: #15803D; }
.ist-durum--sinir  { background: #FEF3C7; color: #92400E; }
.ist-durum--kapali { background: #FEE2E2; color: #B91C1C; }
.ist-durum--yok    { background: var(--surface-2); color: var(--ink-3); }

.ist-grafik { margin-top: 14px; }
.ist-grafik svg { display: block; width: 100%; height: auto; }
.ist-bos { color: var(--ink-3); font-size: .9rem; padding: 22px 0; text-align: center; }

.panel-ust {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline;
  justify-content: space-between; margin-bottom: 22px;
}
.panel-ust .zaman { font-family: var(--font-mono); font-size: .86rem; color: var(--ink-3); }

/* --- 19. Resmi bayrak durumu ------------------------------ */
.bayrak {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  padding: 4px 12px; border-radius: 100px; white-space: nowrap;
}
.bayrak::before { content: ''; width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.bayrak--green { background: #DCFCE7; color: #15803D; }
.bayrak--green::before { background: #16A34A; }
.bayrak--red { background: #FEE2E2; color: #B91C1C; }
.bayrak--red::before { background: #DC2626; }

.resmi-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px; margin: 26px 0;
}
.resmi-panel h3 { font-size: 1.08rem; margin: 0 0 4px; }
.resmi-panel .aciklama { font-size: .9rem; color: var(--ink-2); margin-bottom: 16px; }
.resmi-liste { display: grid; gap: 10px; }
.resmi-satir {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 15px;
}
.resmi-satir .pist { font-family: var(--font-head); font-weight: 700; font-size: .98rem; }
.resmi-satir .saat { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-3); }
.ist-bayrak { margin-top: 10px; }
.ist-bayat { margin: 0 0 18px; }

/* --- 20. Kenar sütunları --------------------------------- */
/* Afişler hazır görsel olarak konur, üzerine yazı basılmaz.
   Sütunlar viewport kenarına değil içerik sütununun kenarına göre
   konumlanır: içerik ortalanmış olduğu için sol sütunun sağ kenarı ve sağ
   sütunun sol kenarı her genişlikte metnin 16px dışında kalır. */
.kenar {
  --afis-en: 210px;           /* afiş genişliği, eşiklere göre değişir */
  --afis-bosluk: 486px;       /* merkezden uzaklık: içerik yarısı + 16px */
  --afis-oran: .563;          /* en/boy oranı, yükseklik sınırı için */
  position: fixed;
  top: calc(var(--header-h) + 20px);
  /* Sütunda iki afiş alt alta durur. Genişlik, ekran yüksekliğine göre
     sınırlanır: kullanılabilir yükseklik ikiye bölünür, afiş oranıyla
     çarpılarak sığacak genişlik bulunur. Böylece alçak ekranda afişler
     gizlenmek yerine küçülür ve ikisi de görünür kalır. */
  --afis-bosluk-dikey: 12px;
  /* Panel dolgusu: afisler ana sayfada koyu hero fotografinin uzerine
     bindigi icin sutun beyaz bir panel olarak durur, boylece afisler her
     zaman ayni zeminde gorunur. */
  --afis-dolgu-yatay: 8px;
  --afis-dolgu-dikey: 10px;
  /* Cikarilanlar: ust bosluk 20, "Reklam" etiketi 26, alt pay 20,
     afisler arasi bosluk ve panelin dikey dolgusu */
  --afis-kullanilabilir: calc(100vh - var(--header-h) - 20px - 26px - 20px
                              - var(--afis-bosluk-dikey)
                              - var(--afis-dolgu-dikey) * 2);
  /* border-box oldugu icin genislige yatay dolgu da eklenir */
  width: min(var(--afis-en),
             calc(var(--afis-kullanilabilir) / 2 * var(--afis-oran)
                  + var(--afis-dolgu-yatay) * 2));
  padding: var(--afis-dolgu-dikey) var(--afis-dolgu-yatay);
  background: var(--paper);
  border-radius: var(--r);
  z-index: 90;
  display: none;
  flex-direction: column;
  gap: var(--afis-bosluk-dikey);
}
.kenar--sol { right: calc(50% + var(--afis-bosluk)); }
.kenar--sag { left:  calc(50% + var(--afis-bosluk)); }

/* Görünürlük eşikleri. Sütun ancak kendi genişliği kadar boşluk varsa açılır:
   gereken en az genişlik = 2 x (afiş genişliği + boşluk). */
@media (min-width: 1240px) {
  .kenar { display: flex; --afis-en: 134px; }
  /* Gorsel yollari burada tanimli, boylece dar ekranda hic istenmiyor */
  .afis--magicfly-en { background-image: image-set(url('../img/afis/magicfly-en.jpg') 1x, url('../img/afis/magicfly-en@2x.jpg') 2x); }
  .afis--magicfly-tr { background-image: image-set(url('../img/afis/magicfly-tr.jpg') 1x, url('../img/afis/magicfly-tr@2x.jpg') 2x); }
  .afis--ifly        { background-image: image-set(url('../img/afis/ifly.jpg') 1x, url('../img/afis/ifly@2x.jpg') 2x); }
  .afis--aksesuar    { background-image: image-set(url('../img/afis/aksesuar.jpg') 1x, url('../img/afis/aksesuar@2x.jpg') 2x); }
  .afis--tamir       { background-image: image-set(url('../img/afis/tamir.jpg') 1x, url('../img/afis/tamir@2x.jpg') 2x); }
}
@media (min-width: 1300px) { .kenar { --afis-en: 164px; } }
@media (min-width: 1400px) { .kenar { --afis-en: 204px; } }
@media (min-width: 1460px) { .kenar { --afis-en: 226px; } }
/* Çok alçak ekranda afiş anlamsız kalacak kadar küçülür, tamamen kapat */
@media (max-height: 420px) { .kenar { display: none !important; } }

/* Ana sayfa gibi geniş (1180px) şeritler afişlerin altına girerdi. Afişlerin
   açık olduğu aralıkta içerik şeritleri iç sayfa genişliğine (940px) çekilir.
   Üst bilgi ve alt bilgi buna dahil değildir, menü dar sütuna sığmaz. */
@media (min-width: 1240px) and (max-width: 1679px) {
  main .wrap, .hero-inner, .factbar-inner,
  .site-footer .wrap { max-width: 940px; }
}
/* 1680px üstünde 1180px şerit ile afiş paneli yan yana sığar */
@media (min-width: 1680px) { .kenar { --afis-bosluk: 606px; } }

/* Afis gorseli <img> degil CSS arkaplanidir. Sebep: kenar sutunlari
   1240px altinda display:none ve <img> olsaydi telefon gormeyecegi iki
   afisi (yaklasik 164KB) yine de indirirdi. Arkaplan olarak yalnizca
   sutun goruntulendiginde iniyor. */
.afis {
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
  aspect-ratio: 941 / 1672;
}
.afis--magicfly-tr { aspect-ratio: 1024 / 1536; }
.afis:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.afis:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }

.afis-etiket {
  display: block; text-align: center; flex-shrink: 0; margin-top: -2px; font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); padding: 0 0 6px;
}

/* --- 21. Fotoğraf şeridi ve içerik görselleri ------------- */
/* Bölüm başına konan geniş görsel */
.bant-foto {
  margin: 0; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.bant-foto img { width: 100%; height: auto; display: block; }
.bant-foto figcaption {
  font-size: .86rem; color: var(--ink-3); padding: 12px 4px 0; text-align: center;
}

/* Metin içine giren dar görsel */
.yan-foto {
  float: inline-end; width: 260px; margin: 6px 0 20px; margin-inline-start: 26px;
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm);
}
.yan-foto img { width: 100%; height: auto; display: block; }
.yan-foto figcaption { font-size: .8rem; color: var(--ink-3); padding: 10px 12px; background: var(--surface); }
@media (max-width: 700px) {
  .yan-foto { float: none; width: 100%; margin: 20px 0; }
  /* Dar ekranda dikey fotoğraf sayfayı boydan kaplamasın */
  .yan-foto img { max-height: 400px; object-fit: cover; object-position: center 40%; }
}

/* --- 22. Fotoğraflı sayfa başlığı ------------------------- */
.page-head--foto {
  position: relative;
  border-bottom: 0;
  background-color: var(--ink);
  padding: 46px 0 50px;
  isolation: isolate;
  overflow: hidden;
}
/* Bant görseli CSS arkaplanı değil <img> olarak durur; böylece srcset ile
   dar ekranda küçük dosya inebiliyor. Arkaplan olsaydı tarayıcı ekran
   genişliğine göre seçim yapamazdı. */
.page-head-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
}
.page-head--foto::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(11,31,42,.58) 0%,
    rgba(11,31,42,.70) 55%,
    rgba(11,31,42,.88) 100%);
}
.page-head--foto h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.page-head--foto .lede { color: #DFEAF0; }
.page-head--foto .updated { color: #9FBECC; }

/* Fotoğraflı başlık kullanan sayfalarda ekmek kırıntısı bandın üstünde kalır */
.page-head--foto + * { margin-top: 0; }

/* --- 23. Dil değiştirici ---------------------------------- */
/* Alti dil var; yan yana dugme olarak sigmadigi icin acilir liste.
   <details> kullaniliyor: JavaScript gerekmiyor, klavyeyle acilir ve
   betik yuklenmese de calisir. */
.dil {
  position: relative;
  margin-inline-start: 14px;
  flex-shrink: 0;
}
.dil > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-head); font-weight: 600; font-size: .8rem;
  color: var(--ink-2); line-height: 1; cursor: pointer;
  min-height: 40px; box-sizing: border-box;
}
.dil > summary::-webkit-details-marker { display: none; }
.dil > summary::after {
  content: ''; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px,-1px);
}
.dil > summary:hover { background: var(--surface-2); color: var(--sea); }
.dil[open] > summary { background: var(--surface-2); color: var(--sea); }

.dil-liste {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0;
  min-width: 172px; z-index: 120;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 6px; margin: 0; list-style: none;
}
.dil-liste li { margin: 0; }
.dil-liste a {
  display: block; padding: 10px 12px; min-height: 44px; box-sizing: border-box;
  border-radius: var(--r-sm); font-size: .92rem; color: var(--ink-2);
}
.dil-liste a:hover { background: var(--surface-2); color: var(--sea); text-decoration: none; }
.dil-liste a[aria-current] { background: var(--sea); color: #fff; }

@media (max-width: 1239px) {
  .dil { margin: 14px 0 0; width: 100%; }
  .dil > summary { width: 100%; justify-content: space-between; padding: 12px 14px; min-height: 44px; }
  .dil-liste { position: static; box-shadow: none; margin-top: 6px; min-width: 0; }
}

/* --- 24. Mobil iyilestirmeleri ---------------------------- */
/* Telefonda okunabilirlik ve parmakla kullanim icin dokunma hedefleri
   buyutulur, dikey bosluklar kisaltilir. Olcut: dokunulabilir her ogenin
   en az 44px yuksekliginde olmasi. */
@media (max-width: 780px) {
  /* Masaustunde nefes alan bosluklar telefonda ekrani bosa harciyor */
  .section { padding: 40px 0; }
  .section--tight { padding: 30px 0; }
  .site-footer { padding: 40px 0 24px; }
  .page-head--foto { padding: 34px 0 38px; }

  /* Icindekiler bagl.: satirlar birbirine cok yakindi, parmakla isabet zordu */
  .toc { padding: 16px 18px; }
  .toc ol { font-size: 1rem; }
  .toc li { margin-bottom: 2px; }
  .toc a {
    display: block;
    padding: 11px 4px;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* Ekmek kirintisi de dokunulabilir olmali */
  .breadcrumb { padding: 10px 0; }
  .breadcrumb a { display: inline-block; padding: 10px 2px; min-height: 44px; }
  .breadcrumb li, .breadcrumb ol { align-items: center; }

  /* Alt bilgi mobilde ana gezinme gorevi goruyor, satirlari sikisikti */
  .site-footer li { margin-bottom: 0; }
  .site-footer ul a {
    display: block;
    padding: 12px 2px;
    min-height: 44px;
    box-sizing: border-box;
  }
  .site-footer a { font-size: 1rem; }
  .footer-bottom { gap: 6px; }
  .footer-bottom a { display: inline-block; padding: 10px 2px; }

  /* Dil degistirici parmakla rahat secilsin. inline-flex kullanilmiyor:
     satir tam genislikte gorunurken yalnizca yazinin kendisi tiklanabilir
     kaliyordu, dil listesinde dokunma hedefi 70 piksele dusuyordu. */
  .dil a {
    display: flex; align-items: center;
    padding: 12px 14px; min-height: 44px; width: 100%;
    box-sizing: border-box;
  }

  /* Metin icindeki baglantilar cumlenin parcasi, satir yuksekligini bozmasin */
  .prose p a, .prose li a { padding: 2px 0; }

  /* Tablolar telefonda yatay kayabildigini belli etsin */
  .table-scroll { -webkit-overflow-scrolling: touch; }

  /* Uzun URL ve terimler satiri tasirmasin */
  .prose { overflow-wrap: break-word; }
}

/* Menu dugmesi her boyutta rahat basilir olmali */
.menu-toggle {
  min-width: 44px; min-height: 44px;
  display: none;
  align-items: center; justify-content: center; flex-direction: column;
}
@media (max-width: 1239px) { .menu-toggle { display: flex; } }

/* --- 25. Metin arasi genis banner ------------------------- */
/* Sayfa icine serpistirilen 4:1 reklam bantlari. Kenar sutunlarindan
   farkli olarak telefonda da gorunurler, cunku metin genisligindeler ve
   sayfa akisini bozmuyorlar. */
.satir-afis {
  display: block;
  margin: 34px 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  line-height: 0;
  transition: transform .2s, box-shadow .2s;
}
/* .prose img kuralinin margin ve radius degerleri banner'in icine
   bosluk birakiyordu, burada sifirlanir */
.satir-afis img { width: 100%; height: auto; display: block; margin: 0; border-radius: 0; }
.satir-afis:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.satir-afis:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }

/* Reklam oldugu belli olsun */
.satir-afis-sarmal { margin: 34px 0; }
.satir-afis-sarmal .afis-etiket { text-align: start; padding-bottom: 5px; }
.satir-afis-sarmal .satir-afis { margin: 0; }

@media (max-width: 780px) {
  .satir-afis-sarmal { margin: 26px 0; }
}

/* --- 26. Sagdan sola diller (Arapca, Farsca) --------------- */
/* Duzenin cogu mantiksal ozelliklerle (inset-inline, margin-inline,
   text-align:start) yazildigi icin dir="rtl" ile kendiliginden doner.
   Burada yalnizca donmeyen birkac nokta ele aliniyor. */

/* Mobil menu RTL'de soldan girer, saga degil */
@media (max-width: 1239px) {
  [dir="rtl"] .nav { transform: translateX(-102%); }
  [dir="rtl"] .nav.is-open { transform: translateX(0); }
}

/* Zaman ekseni her dilde soldan saga okunur; grafigi cevirmek
   veriyi yaniltici hale getirirdi. Sayisal panelleri LTR birakiyoruz. */
[dir="rtl"] .ist-grafik,
[dir="rtl"] .ist-anlik,
[dir="rtl"] .ist-pusula,
[dir="rtl"] .ist-zaman,
[dir="rtl"] .resmi-satir .saat { direction: ltr; }

/* ".updated" bu listede degil. Tarih icerideki <bdi> ile yalitiliyor,
   satirin tamami LTR yapilirsa Arapca etiket yanlis hizalaniyordu. */
[dir="rtl"] .ist-anlik { text-align: start; }

/* Ekmek kirintisindaki egik cizgi RTL'de ters yone bakmali */
[dir="rtl"] .breadcrumb li + li::before { content: '\\'; }

/* Kod, olcu birimi ve telefon numaralari LTR kalir.
   Aksi halde "+90 555 623 39 97" ekranda "97 39 623 555 90+" olarak
   siralanir: rakam gruplari RTL akista ters okunur. */
[dir="rtl"] code, [dir="rtl"] .mono { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href*="wa.me"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* bdi zaten yalitir; yonu icerigin ilk guclu karakterine gore secer */
[dir="rtl"] bdi { unicode-bidi: isolate; }

/* Arapca ve Farsca metin biraz daha buyuk punto ile rahat okunur */
[lang="ar"] body, [lang="fa"] body { font-size: 17.5px; line-height: 1.75; }
[lang="ar"] h1, [lang="fa"] h1,
[lang="ar"] h2, [lang="fa"] h2,
[lang="ar"] h3, [lang="fa"] h3 { line-height: 1.4; }

/* Farsca ve Arapca icin sistem yazi tipleri; Barlow bu alfabeleri
   kapsamadigi icin basliklarda da govde yazi tipine dusulur */
[lang="ar"] :is(h1,h2,h3,h4,.brand-name,.afis-baslik),
[lang="fa"] :is(h1,h2,h3,h4,.brand-name,.afis-baslik) {
  font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
}
[lang="ar"] body, [lang="fa"] body {
  font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
}

/* --- 27. SHM kayit yonlendirmesi -------------------------- */
/* Kayit olmadan kalkis pistine girilemiyor, bu yuzden resmi kayit
   adresine giden baglanti metin icinde kaybolmamali. */
.shm-cta {
  display: block;
  background: linear-gradient(135deg, var(--sea-dark) 0%, var(--sea) 100%);
  color: #fff;
  border-radius: var(--r);
  padding: 24px 26px;
  margin: 28px 0;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .18s, box-shadow .18s;
}
.shm-cta:hover, .shm-cta:focus-visible {
  color: #fff; text-decoration: none;
  transform: translateY(-2px); box-shadow: var(--shadow-lg);
}
.shm-cta .shm-ustbaslik {
  display: block; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: #9FD8DF; margin-bottom: 7px;
}
.shm-cta .shm-baslik {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 1.32rem; line-height: 1.25; margin-bottom: 8px;
}
.shm-cta .shm-metin {
  display: block; font-size: .95rem; line-height: 1.55; color: #DCEEF1;
  max-width: 56ch;
}
.shm-cta .shm-dugme {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 16px; padding: 12px 20px; min-height: 44px;
  background: #fff; color: var(--sea-dark);
  border-radius: var(--r-sm);
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
}
.shm-cta .shm-dugme::after {
  content: ''; width: 8px; height: 8px;
  border-top: 2px solid currentColor; border-inline-end: 2px solid currentColor;
  transform: rotate(45deg);
}
[dir="rtl"] .shm-cta .shm-dugme::after { transform: rotate(225deg); }
.shm-cta .shm-adres {
  display: block; margin-top: 11px; font-family: var(--font-mono);
  font-size: .82rem; color: #9FD8DF;
}
@media (max-width: 780px) {
  .shm-cta { padding: 20px; }
  .shm-cta .shm-baslik { font-size: 1.15rem; }
  .shm-cta .shm-dugme { width: 100%; justify-content: center; }
}

/* Ayni kalibin ikinci rengi. XContest gibi dis kaynaklara giden buton icin.
   SHM kaydi sitedeki tek lacivert kutu kalsin, en onemli eylem odur. */
.shm-cta--dis {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
}
.shm-cta--dis .shm-ustbaslik,
.shm-cta--dis .shm-adres { color: #9EC3D6; }
.shm-cta--dis .shm-metin { color: #DCE7EE; }
.shm-cta--dis .shm-dugme { color: var(--ink); }

/* Kalkis ve inis ust duzey sekme oldugundan menu yediye cikti. Dar
   masaustunde ve uzun etiketli dillerde (Turkce, Rusca, Almanca) sigmasi
   icin bu aralikta yazi ve bosluk kisilir. */
@media (min-width: 1240px) {
  .nav > ul > li > .nav-link { font-size: .86rem; padding-inline: 9px; }
  .nav-cta { font-size: .84rem; padding: 9px 13px; }
  .dil > summary { padding: 8px 9px; }
}

/* --- 28. Acil numaralar ----------------------------------- */
/* Acil anda telefonda acilan sayfa. Numaralar tablo hucresi degil,
   dogrudan aranabilir buyuk dugmeler: tek dokunusla arama baslar. */
.acil-kutu { margin: 26px 0; }
.acil-liste { display: grid; gap: 10px; margin-top: 12px; }

.acil {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px; min-height: 64px;
  background: var(--paper);
  border: 1px solid var(--danger-line);
  border-radius: var(--r);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.acil:hover, .acil:focus-visible {
  text-decoration: none; background: #fff;
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.acil-no {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.6rem; line-height: 1; color: var(--danger-ink);
  min-width: 3.2ch; text-align: center;
  direction: ltr; unicode-bidi: isolate;      /* RTL'de rakamlar ters dizilmesin */
}
.acil-ad { font-weight: 650; color: var(--ink); font-size: .98rem; line-height: 1.3; }
.acil-alt { display: block; font-weight: 400; color: var(--ink-3); font-size: .84rem; margin-top: 3px; line-height: 1.35; }
.acil-metin { min-width: 0; }

/* En cok aranacak numara one cikar */
.acil--birincil {
  background: var(--danger-ink); border-color: var(--danger-ink);
  min-height: 78px; padding: 16px 20px;
}
.acil--birincil:hover, .acil--birincil:focus-visible { background: #9f1f16; }
.acil--birincil .acil-no { color: #fff; font-size: 2.3rem; min-width: 3.6ch; }
.acil--birincil .acil-ad { color: #fff; font-size: 1.05rem; }
.acil--birincil .acil-alt { color: #FBD5D2; }

/* Aranabilir oldugu belli olsun */
.acil::after {
  content: ''; margin-inline-start: auto; flex-shrink: 0;
  width: 17px; height: 17px; opacity: .55;
  background: currentColor; color: var(--danger-ink);
  -webkit-mask: var(--tel-ikon) center/contain no-repeat;
          mask: var(--tel-ikon) center/contain no-repeat;
}
.acil--birincil::after { color: #fff; opacity: .85; }
:root {
  --tel-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}

/* Dar ekranda numara ve ad alt alta sikismasin */
@media (max-width: 480px) {
  .acil { gap: 12px; padding: 12px 14px; }
  .acil-no { font-size: 1.45rem; }
  .acil--birincil .acil-no { font-size: 2rem; }
}

/* --- 29. WhatsApp kanali QR kutusu -------------------------- */
/* Ana sayfadaki anlik hava durumu kanali bolumu. QR yalnizca baska bir
   cihazla taranabilir; telefonda kendi ekranini tarayamazsin, bu yuzden
   dar ekranda gizlenir ve yerine dugme kalir. */
.qr-kutu {
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px;
  box-shadow: var(--shadow-sm);
}
.qr-kutu img {
  width: 180px; height: 180px; display: block;
  border-radius: var(--r-sm);
  image-rendering: pixelated;      /* kenarlar bulaniklasmasin */
}
.qr-kutu figcaption {
  font-size: .86rem; color: var(--ink-3); text-align: center; max-width: 24ch;
}

@media (max-width: 860px) {
  .qr-kutu { display: none; }
}