/* ============================================================================
   DÜNYA DÖVİZ — Tasarım / Stil dosyası
   Renkler doğrudan logodan alınmıştır. Köşeler bilinçli olarak keskindir.
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --blue:      #015092;   /* logo mavisi (ana renk) */
  --blue-deep: #013a6b;   /* koyu ton  */
  --blue-tint: #e6edf5;   /* açık mavi tonu (logodan) */
  --bg:        #ebebeb;   /* logo arka plan grisi */
  --panel:     #ffffff;
  --ink:       #14202c;
  --muted:     #647587;
  --line:      #d8dde3;
  --line-soft: #e9edf1;
  --up:        #0f7a4e;   /* yükseliş yeşili (sadece yanıp sönme) */
  --down:      #b4232a;   /* düşüş kırmızısı (sadece yanıp sönme) */
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100vh;
  display:flex; flex-direction:column;         /* footer'ı en alta sabitler */
  font-family:'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
main{ flex:1 0 auto; padding:36px 0 60px; }      /* içerik alanı büyür */
.container{ width:min(1180px, 92vw); margin-inline:auto; }

/* ---- Büyük arka plan şekli (grileştirilmiş, tam görünür) ------------- */
.bg-shape{ position:absolute; pointer-events:none; z-index:0; }
.bg-shape path{ fill:currentColor; }

/* ============================ ÜST BAR ================================= */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--panel);
  border-bottom:2px solid var(--blue);
}
.topbar__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; height:92px;
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--blue); }
.brand__logo{ height:66px; width:auto; display:block; }
.brand__name{
  font-weight:800; font-size:1.55rem; letter-spacing:-.02em; color:var(--blue);
  white-space:nowrap; line-height:1;
}
.brand__name small{ display:block; font-size:.6rem; font-weight:600; letter-spacing:.24em;
  color:var(--muted); text-transform:uppercase; margin-top:5px; }

/* ---- Navigasyon ---- */
.nav{ display:flex; align-items:center; gap:6px; }
.nav a, .dropdown__btn{
  font-weight:600; font-size:.95rem; color:var(--ink);
  padding:11px 15px; background:none; border:0; cursor:pointer;
  font-family:inherit; display:inline-flex; align-items:center; gap:8px;
}
.nav a:hover, .dropdown__btn:hover{ background:var(--blue-tint); color:var(--blue); }
.nav a.is-active{ color:var(--blue); box-shadow:inset 0 -2px 0 var(--blue); }

/* ---- Açılır menü (Tüm Kurlar) ---- */
.dropdown{ position:relative; }
.dropdown__btn .caret{ transition:transform .18s ease; }
.dropdown.open .dropdown__btn{ background:var(--blue); color:#fff; }
.dropdown.open .caret{ transform:rotate(180deg); }
.dropdown__menu{
  position:absolute; right:0; top:100%; min-width:270px;
  background:var(--panel); border:1px solid var(--line);
  box-shadow:0 16px 34px -18px rgba(1,58,107,.55); padding:0;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.15s ease;
}
.dropdown.open .dropdown__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown__menu a{
  display:flex; align-items:center; gap:12px; padding:13px 15px;
  font-weight:600; font-size:.92rem; border-bottom:1px solid var(--line-soft);
}
.dropdown__menu a:last-child{ border-bottom:0; }
.dropdown__menu a:hover{ background:var(--blue-tint); color:var(--blue); }
.dropdown__menu a .num{
  width:24px; height:24px; flex:none; display:grid; place-items:center;
  background:var(--blue); color:#fff; font-size:.78rem; font-weight:800;
}
.dropdown__menu .sub-adres{ display:block; font-weight:500; font-size:.72rem; color:var(--muted); margin-top:2px; }

/* ============================ HERO ŞERİDİ ============================ */
.hero{ position:relative; overflow:hidden; background:var(--blue); color:#fff; }
.hero .bg-shape{ right:6%; top:50%; transform:translateY(-50%);
  height:132px; width:auto; color:#ffffff; opacity:.10; }
.hero__row{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:32px 0; flex-wrap:wrap; }
.hero .cred{ display:inline-block; margin-bottom:12px; padding:6px 13px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32);
  font-size:.72rem; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:#fff; }
.hero h1{ margin:0; font-size:1.55rem; font-weight:800; letter-spacing:-.01em; }
.hero p{ margin:6px 0 0; color:#cfe0f0; font-size:.94rem; font-weight:500; }
.live{
  display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22); padding:10px 15px;
  font-size:.85rem; font-weight:600;
}
.dot{ width:9px; height:9px; border-radius:50%; background:#57e08c;
  box-shadow:0 0 0 0 rgba(87,224,140,.6); animation:pulse 2s infinite; flex:none; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(87,224,140,0); } 100%{ box-shadow:0 0 0 0 rgba(87,224,140,0); } }

/* ============================ İÇERİK ================================= */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0 0 20px; flex-wrap:wrap; }
.section-head h2{ margin:0; font-size:1.2rem; font-weight:800; letter-spacing:-.01em; }
.section-head .hint{ font-size:.85rem; color:var(--muted); font-weight:500; }

/* ---- Şube kartları ızgarası ---- */
.branches{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }

.card{
  background:var(--panel); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
}
.card__head{
  background:var(--blue); color:#fff; padding:16px 18px;
}
.card__city{ display:block; font-size:.66rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:3px; }
.card__head h3{ margin:0; font-size:1.08rem; font-weight:800; letter-spacing:-.01em; }
.card__meta{ padding:14px 18px 6px; display:grid; gap:7px; }
.card__meta .row{ display:flex; gap:10px; font-size:.85rem; color:#42505e; }
.card__meta .row b{ color:var(--blue); font-weight:700; flex:none; width:42px; }
.card__meta .tels{ display:flex; flex-direction:column; gap:2px; }

/* Aranabilir telefon bağlantıları */
.tel-soon{ opacity:.7; font-style:italic; }
.adres-link{ color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; }
.adres-link:hover{ color:var(--blue); }
.detail-meta .adres-link:hover{ color:#fff; border-bottom-color:#fff; }
/* 3 veya daha fazla telefon numarası: 2 sütun (2 üst / 2 alt) */
.card__meta .tels:has(> :nth-child(3)),
.detail-meta .tels:has(> :nth-child(3)){
  display:grid; grid-template-columns:1fr 1fr; gap:4px 16px;
}
.card__meta .tels:has(> :nth-child(3)) .tel-link,
.card__meta .tels:has(> :nth-child(3)) .tel-soon{
  white-space:nowrap; font-size:.8rem;
}
.tel-link{ color:inherit; font-weight:600; text-decoration:none; border-bottom:1px dotted currentColor; }
.tel-link:hover{ color:var(--blue); }
.detail-meta .tel-link:hover{ color:#fff; border-bottom-color:#fff; }

/* ---- Kur tablosu ---- */
.rates{ width:100%; border-collapse:collapse; margin-top:8px; }
.rates thead th{
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); text-align:right; padding:11px 18px; border-bottom:1px solid var(--line);
}
.rates thead th:first-child{ text-align:left; }
.rates tbody td{ padding:13px 18px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.rates tbody tr:last-child td{ border-bottom:0; }
.sym{ display:flex; align-items:center; gap:12px; }
.sym img{ width:30px; height:22px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.08);
  flex:none; background:var(--line-soft); }
.sym .code{ font-weight:800; font-size:.9rem; letter-spacing:.01em; }
.sym .name{ font-size:.74rem; color:var(--muted); font-weight:500; margin-top:1px; }

/* Rakamlar: nötr renk. Renk yalnızca değişince kısa süre yanıp söner. */
.num{
  text-align:right; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  font-weight:700; font-size:.99rem; white-space:nowrap; color:var(--ink);
}
.num.flash-up{ animation:flashUp 1.4s ease; }
.num.flash-down{ animation:flashDown 1.4s ease; }
@keyframes flashUp{
  0%,20%{ background:rgba(15,122,78,.20); color:var(--up); box-shadow:inset 0 0 0 1px rgba(15,122,78,.35); }
  100%{ background:transparent; color:var(--ink); box-shadow:none; }
}
@keyframes flashDown{
  0%,20%{ background:rgba(180,35,42,.18); color:var(--down); box-shadow:inset 0 0 0 1px rgba(180,35,42,.35); }
  100%{ background:transparent; color:var(--ink); box-shadow:none; }
}

/* ---- Kart alt: daha fazla ---- */
.card__more{ margin-top:auto; }
.card__more a{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:16px 15px 18px; background:#fff; border-top:1px solid var(--line-soft);
  transition:background .15s ease;
}
.card__more .more-text{ font-size:.78rem; font-weight:600; color:var(--muted); text-align:center; }
.card__more .chev{ width:40px; height:16px; color:var(--blue); transition:transform .2s ease; }
.card__more a:hover{ background:var(--blue-tint); }
.card__more a:hover .more-text{ color:var(--blue); }
.card__more a:hover .chev{ transform:translateY(3px); }

/* ---- Durum / güncelleme metni ---- */
.updated{ font-size:.8rem; color:var(--muted); font-weight:500; }
.updated b{ color:var(--ink); font-weight:700; }

/* ============================ ŞUBE DETAY SAYFASI ==================== */
.detail-hero{ position:relative; overflow:hidden; background:var(--blue); color:#fff; }
.detail-hero .bg-shape{ right:5%; top:50%; transform:translateY(-50%);
  height:158px; width:auto; color:#ffffff; opacity:.10; }
.detail-hero__row{ position:relative; z-index:1; padding:30px 0; display:flex; justify-content:space-between;
  gap:16px; align-items:flex-end; flex-wrap:wrap; }
.crumb{ font-size:.82rem; color:#cfe0f0; font-weight:600; margin-bottom:8px; }
.crumb a:hover{ color:#fff; }
.detail-city{ font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:#cfe0f0; margin-bottom:5px; }
.detail-hero h1{ margin:0; font-size:1.75rem; font-weight:800; color:#fff; letter-spacing:-.02em; }
.detail-meta{ display:flex; gap:26px; margin-top:12px; flex-wrap:wrap; }
.detail-meta .row{ font-size:.9rem; color:#dce7f2; display:flex; gap:8px; align-items:flex-start; }
.detail-meta .row b{ color:#fff; font-weight:700; }
.detail-meta .tels{ display:flex; flex-direction:column; gap:2px; }

.panel{ background:var(--panel); border:1px solid var(--line); overflow:hidden; margin-top:28px; }
.panel__head{ background:var(--blue); color:#fff; padding:16px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.panel__head h2{ margin:0; font-size:1.08rem; font-weight:800; letter-spacing:-.01em; }
.panel__head span{ font-size:.78rem; color:#cfe0f0; font-weight:600; }
.panel__head .head-live{ display:inline-flex; align-items:center; gap:8px; }
.panel .rates thead th{ padding:14px 22px; background:var(--blue-tint); color:var(--blue); border-bottom:1px solid #cdddee; }
.panel .rates tbody td{ padding:16px 22px; }
.panel .rates tbody tr:nth-child(even){ background:#f4f8fc; }
.panel .rates tbody tr:hover{ background:#e9f1fa; }

/* ============================ YAKINDA (kapalı şube) =============== */
.yakinda{ padding:30px 18px 34px; text-align:center; }
.yakinda__title{ font-size:1.1rem; font-weight:800; color:var(--blue); letter-spacing:-.01em; }
.yakinda__sub{ margin-top:7px; font-size:.85rem; color:var(--muted); line-height:1.5; }
.yakinda--lg{ padding:56px 24px 60px; }
.yakinda--lg .yakinda__title{ font-size:1.7rem; }
.yakinda--lg .yakinda__sub{ font-size:.95rem; max-width:520px; margin-left:auto; margin-right:auto; }
.yakinda-tag{ display:inline-block; font-size:.6rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--blue); background:var(--blue-tint); padding:2px 6px;
  margin-left:6px; vertical-align:middle; }
.live--soon{ background:rgba(255,255,255,.16); font-weight:700; }

/* ============================ DÖVİZ ÇEVİRİCİ ======================= */
.converter{ margin-top:28px; }
.conv-toggle{ display:inline-flex; align-items:center; gap:8px; font-family:inherit;
  font-weight:700; font-size:.82rem; color:#fff; cursor:pointer;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.30); padding:8px 13px; }
.conv-toggle:hover{ background:rgba(255,255,255,.26); }
.conv-toggle .caret{ transition:transform .18s ease; }
.converter.is-collapsed .conv-toggle .caret{ transform:rotate(-90deg); }
.converter.is-collapsed .conv{ display:none; }
.conv{ padding:20px 22px 22px; }
.conv__modes{ display:inline-flex; border:1px solid var(--line); }
.conv__modes button{ font-family:inherit; font-size:.9rem; font-weight:700; padding:11px 18px;
  background:#fff; color:var(--muted); border:0; cursor:pointer; }
.conv__modes button + button{ border-left:1px solid var(--line); }
.conv__modes button.active{ background:var(--blue); color:#fff; }
.conv__help{ font-size:.83rem; color:var(--muted); margin:14px 0 12px; }
.conv__row{ display:flex; gap:12px; flex-wrap:wrap; }
.conv__row input, .conv__row select{ font-family:inherit; font-size:1.05rem; font-weight:600;
  padding:13px 14px; border:1px solid var(--line); background:#fff; color:var(--ink); }
.conv__row input{ flex:1 1 170px; min-width:0; }
.conv__row select{ flex:1 1 230px; }
.conv__row input:focus, .conv__row select:focus{ outline:none; border-color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue); }
.conv__result{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:1.4rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1; }
.conv__result b{ color:var(--blue); }
.conv__note{ margin-top:7px; font-size:.8rem; color:var(--muted); }
@media (max-width:560px){
  .conv__result{ font-size:1.2rem; }
  .conv__modes{ width:100%; }
  .conv__modes button{ flex:1; }
}

/* ============================ BİLGİLENDİRME SAYFASI =============== */
.info{ display:flex; flex-direction:column; gap:24px; }
.info-body{ padding:22px 24px 26px; }
.info-body p{ margin:0 0 14px; color:#2c3947; line-height:1.7; }
.info-body p:last-child{ margin-bottom:0; }
.info-body h3{ font-size:1.02rem; font-weight:800; color:var(--blue); margin:22px 0 10px; }
.info-body h3:first-child{ margin-top:2px; }
.info-body blockquote{ margin:18px 0; padding:14px 18px; background:var(--blue-tint);
  border-left:4px solid var(--blue); font-weight:600; color:var(--blue-deep); line-height:1.6; }
.info-conc{ font-weight:700; color:var(--ink) !important; }
.info-list{ list-style:none; counter-reset:n; margin:6px 0 4px; padding:0; }
.info-list li{ counter-increment:n; position:relative; padding:3px 0 3px 48px; margin:0 0 16px;
  color:#2c3947; line-height:1.7; }
.info-list li:last-child{ margin-bottom:0; }
.info-list li::before{ content:counter(n); position:absolute; left:0; top:2px;
  width:30px; height:30px; background:var(--blue); color:#fff; font-weight:800; font-size:.85rem;
  display:grid; place-items:center; font-variant-numeric:tabular-nums; }
.info-list li strong{ color:var(--blue-deep); }

.belgeler{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; }
.belge{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-weight:600; font-size:.92rem; transition:.15s ease; }
.belge:hover{ background:var(--blue-tint); border-color:var(--blue); color:var(--blue); }
.belge__ico{ width:22px; height:22px; flex:none; color:var(--blue); }
.belge__ad{ flex:1; }
.belge__arr{ color:var(--blue); font-weight:800; }
.belge-bos{ color:var(--muted); font-size:.9rem; margin:0; }

@media (max-width:560px){
  .info-body{ padding:18px 16px 20px; }
  .info-list li{ padding-left:42px; }
  .info-list li::before{ width:27px; height:27px; font-size:.8rem; }
}

/* ============================ ALT BİLGİ ============================= */
.foot{ border-top:1px solid var(--line); background:var(--panel); }
.foot__row{ padding:24px 0; display:flex; justify-content:space-between; gap:18px;
  align-items:center; flex-wrap:wrap; font-size:.84rem; color:var(--muted); }
.foot__row .brand{ flex-direction:column; align-items:flex-start; gap:2px; }
.foot__row .brand__name{ font-size:1.1rem; }
.foot__sub{ display:block; font-size:.72rem; font-weight:600; color:var(--muted); }
.disclaimer{ max-width:640px; }

/* ============================ DUYARLI (mobil) ====================== */
@media (max-width:900px){
  .branches{ grid-template-columns:1fr; }
  .hero .bg-shape{ height:108px; opacity:.08; }
  .detail-hero .bg-shape{ height:112px; }
}
@media (max-width:560px){
  .topbar__row{ height:74px; }
  .brand__logo{ height:50px; }
  .brand__name{ font-size:1.3rem; }
  .brand__name small{ display:none; }
  .nav a, .dropdown__btn{ padding:10px 11px; font-size:.9rem; }
  .nav .nav-home{ display:none; }
  .detail-hero h1{ font-size:1.45rem; }
  .rates thead th, .rates tbody td{ padding-left:14px; padding-right:14px; }
  .sym .name{ display:none; }
}

/* Yüklenirken iskelet */
.skeleton{ color:transparent !important; position:relative; }
.skeleton::after{ content:""; position:absolute; inset:0; margin:auto; width:62%; height:12px;
  background:linear-gradient(90deg,#eef1f4,#dde2e8,#eef1f4);
  background-size:200% 100%; animation:sh 1.2s infinite; }
.num.skeleton::after{ margin-right:0; }
@keyframes sh{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }