/* ============================================================
   Barcelona Aile Rehberi — tasarım sistemi
   Mobil öncelikli, harici bağımlılık yok (tam çevrimdışı çalışır)
   ============================================================ */

:root{
  --bg:        #faf7f0;
  --bg-soft:   #f3eee2;
  --card:      #ffffff;
  --ink:       #22303c;
  --ink-soft:  #5a6a78;
  --primary:   #14538c;
  --primary-d: #0d3c67;
  --coral:     #e4654a;
  --gold:      #e8a33d;
  --mint:      #6fa895;
  --line:      #e7e0d0;
  --radius:    18px;
  --radius-s:  12px;
  --shadow:    0 6px 18px rgba(34,48,60,.08);
  --shadow-l:  0 14px 40px rgba(34,48,60,.16);
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.65;
  color:var(--ink);
  background:
    radial-gradient(1200px 500px at 85% -80px, rgba(111,168,149,.14), transparent 60%),
    radial-gradient(900px 420px at -10% 240px, rgba(232,163,61,.10), transparent 55%),
    var(--bg);
}

img,svg{ max-width:100%; vertical-align:middle; }

a{ color:var(--primary); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--coral); }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--primary); color:#fff; padding:.7rem 1rem; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

/* ---------- Üst bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,240,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar::after{
  content:""; display:block; height:4px;
  background:linear-gradient(90deg,
    var(--primary) 0 22%, var(--mint) 22% 38%,
    var(--gold) 38% 54%, var(--coral) 54% 72%,
    var(--primary-d) 72% 86%, var(--gold) 86% 100%);
}
.topbar-inner{
  max-width:960px; margin:0 auto; padding:.6rem 1rem;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.brand-mark{ display:grid; place-items:center; flex:0 0 auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-text strong{ font-size:1.06rem; letter-spacing:.2px; }
.brand-text small{ color:var(--ink-soft); font-size:.78rem; }

.install-btn{
  border:1.5px solid var(--primary); background:#fff; color:var(--primary);
  font:inherit; font-size:.82rem; font-weight:600;
  padding:.45rem .8rem; border-radius:999px; cursor:pointer; white-space:nowrap;
}
.install-btn:hover{ background:var(--primary); color:#fff; }

/* ---------- Bölüm sekmeleri ---------- */
.pills{
  position:sticky; top:calc(4rem + 4px); z-index:40;
  display:flex; gap:.45rem; overflow-x:auto;
  padding:.55rem .9rem;
  background:rgba(250,247,240,.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.pills::-webkit-scrollbar{ display:none; }
.pill{
  flex:0 0 auto; font:inherit; font-size:.86rem; font-weight:600;
  color:var(--ink-soft); text-decoration:none;
  padding:.5rem .85rem; border-radius:999px;
  background:#fff; border:1.5px solid var(--line);
  white-space:nowrap;
}
.pill:hover{ border-color:var(--primary); color:var(--primary); }
.pill.is-active{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 4px 12px rgba(20,83,140,.28);
}

/* ---------- Görünümler ---------- */
/* JS yoksa tüm bölümler görünür (erişilebilirlik) */
html.js .view{ display:none; }
html.js .view.is-active{ display:block; animation:viewIn .35s ease both; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){
  html.js .view.is-active{ animation:none; }
  html{ scroll-behavior:auto; }
}

.wrap{ max-width:960px; margin:0 auto; padding:1.1rem 1rem 2.5rem; }

.page-title{ font-size:1.55rem; line-height:1.25; margin:.2rem 0 .3rem; }
.sec-title{ font-size:1.3rem; margin:2rem 0 .35rem; }
.sec-sub{ color:var(--ink-soft); margin:0 0 1rem; }
.sec-head{ margin-bottom:.6rem; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(700px 320px at 88% -40px, rgba(111,168,149,.35), transparent 62%),
    radial-gradient(520px 300px at -12% 105%, rgba(232,163,61,.28), transparent 60%),
    linear-gradient(150deg, var(--primary) 0%, var(--primary-d) 58%, #0a2e51 100%);
  color:#fff;
}
.hero-inner{ max-width:960px; margin:0 auto; padding:2.4rem 1.2rem 2.6rem; }
.hero-kicker{
  margin:0 0 .5rem; font-size:.85rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#ffd9a1;
}
.hero h1{
  margin:.1rem 0 .7rem; font-size:clamp(2rem, 7vw, 3rem);
  line-height:1.12; letter-spacing:-.5px;
}
.hero-lead{ max-width:56ch; font-size:1.02rem; color:#e8f0f7; margin:0 0 1.1rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 1.3rem; }
.chip{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  padding:.32rem .7rem; border-radius:999px; font-size:.8rem; font-weight:600;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }

.btn{
  display:inline-block; font:inherit; font-weight:700; text-decoration:none;
  padding:.75rem 1.25rem; border-radius:999px; cursor:pointer; border:none;
}
.btn-primary{ background:var(--gold); color:#3a2a05; box-shadow:0 6px 16px rgba(0,0,0,.22); }
.btn-primary:hover{ background:#f2b354; color:#3a2a05; }
.btn-ghost{ background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.4); }
.btn-ghost:hover{ background:rgba(255,255,255,.22); }

/* ---------- Kartlar ---------- */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.05rem 1.1rem 1.15rem; margin:0 0 1.05rem;
}
.card > h2{ margin:.1rem 0 .55rem; font-size:1.12rem; }
.card p{ margin:.45rem 0; }
.card .small{ font-size:.85rem; color:var(--ink-soft); }

.card.tip-card{ border-left:5px solid var(--mint); }
.card.info-card{ border-left:5px solid var(--primary); }
.card.warn-card{ border-left:5px solid var(--coral); }
.card.fun-card{ border-left:5px solid var(--gold); }
.card.steps-card{ border-left:5px solid var(--mint); }

.emergency-card{
  border:1.5px solid #d9553c;
  background:linear-gradient(180deg,#fff6f2,#fff);
}
.emergency-card h2{ color:#b0401f; }
.em-list{ list-style:none; padding:0; margin:.4rem 0 .6rem; }
.em-list li{
  display:flex; justify-content:space-between; align-items:center; gap:.8rem;
  padding:.45rem 0; border-bottom:1px dashed var(--line); flex-wrap:wrap;
}
.em-label{ font-size:.92rem; font-weight:600; }
.em-num{
  font-weight:800; font-size:1.02rem; color:#b0401f; text-decoration:none;
  white-space:nowrap;
}
.madrid-card{ border-left:5px solid var(--primary-d); }

ol.steps{ margin:.4rem 0 .4rem; padding-left:1.25rem; }
ol.steps li{ margin:.45rem 0; }

ul.plain-list{ margin:.4rem 0; padding-left:1.15rem; }
ul.plain-list li{ margin:.42rem 0; }

ol.golden{ margin:.4rem 0; padding-left:1.3rem; }
ol.golden li{ margin:.55rem 0; }

.small{ font-size:.86rem; color:var(--ink-soft); }

/* ---------- Kontrol listeleri ---------- */
.progress-wrap{
  background:var(--bg-soft); border-radius:999px; height:30px;
  overflow:hidden; margin:.2rem 0 .8rem; border:1px solid var(--line);
}
.progress-bar{
  height:100%; width:0%; min-width:34px;
  background:linear-gradient(90deg,var(--mint),var(--primary));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.8rem; font-weight:800;
  transition:width .4s ease;
}
.check-list{ list-style:none; margin:0; padding:0; }
.check-list li{ margin:0; border-bottom:1px dashed var(--line); }
.check-list li:last-child{ border-bottom:none; }
.check-list label{
  display:flex; align-items:flex-start; gap:.65rem;
  padding:.6rem .2rem; cursor:pointer; border-radius:8px; font-size:.95rem;
}
.check-list label:hover{ background:var(--bg-soft); }
.check-list input[type="checkbox"]{
  width:22px; height:22px; margin-top:.15rem; accent-color:var(--primary);
  flex:0 0 auto; cursor:pointer;
}
.check-list label:has(input:checked){ color:var(--ink-soft); }
.check-list label:has(input:checked) strong{ text-decoration:line-through; font-weight:600; }

/* ---------- Hızlı erişim ---------- */
.quick-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:0 0 1.4rem; }
.quick-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s);
  box-shadow:var(--shadow); padding:.85rem .8rem; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:.15rem;
}
.quick-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-l); color:var(--ink); }
.q-ico{ font-size:1.5rem; }
.quick-card strong{ font-size:.95rem; }
.quick-card small{ color:var(--ink-soft); font-size:.78rem; line-height:1.35; }
.q-plan{ border-top:4px solid var(--primary); }
.q-yemek{ border-top:4px solid var(--coral); }
.q-ulasim{ border-top:4px solid var(--gold); }
.q-yerler{ border-top:4px solid var(--mint); }
.q-pratik{ border-top:4px solid var(--primary-d); }
.q-deyim{ border-top:4px solid #8e6bb1; }

/* ---------- Hava tablosu ---------- */
.weather-table{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; margin:.7rem 0;
}
.wt-cell{
  text-align:center; padding:.45rem .2rem; border-radius:10px;
  background:var(--bg-soft); font-weight:700; font-size:.92rem;
}
.wt-head{ background:var(--primary); color:#fff; font-size:.82rem; }

/* ---------- Plan: günler ---------- */
.day-tabs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin:.9rem 0 1rem;
}
.day-tab{
  font:inherit; cursor:pointer; text-align:center;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-s);
  padding:.6rem .3rem; font-weight:700; font-size:.9rem; color:var(--ink-soft);
}
.day-tab small{ display:block; font-weight:500; font-size:.72rem; margin-top:.1rem; }
.day-tab:hover{ border-color:var(--primary); color:var(--primary); }
.day-tab.is-active{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 5px 14px rgba(20,83,140,.3);
}
.day-tab.is-active small{ color:#cfe3f5; }

.day-head h2{ margin:.2rem 0 .3rem; font-size:1.25rem; }
.day-lead{ color:var(--ink-soft); margin:0 0 1rem; }

.tl{ position:relative; margin:0 0 .8rem; padding:0 0 0 .35rem; }
.tl-item{
  display:grid; grid-template-columns:64px 1fr; gap:.75rem;
  padding:.75rem 0; border-bottom:1px dashed var(--line);
}
.tl-item:last-child{ border-bottom:none; }
.tl-time{
  font-weight:800; color:var(--primary); font-size:.9rem; text-align:right;
  padding-top:.1rem; white-space:nowrap;
}
.tl-body h3{ margin:.05rem 0 .35rem; font-size:1.03rem; }
.tl-body p{ margin:.3rem 0; font-size:.95rem; }
.uber-note{
  display:block; margin-top:.4rem; font-size:.84rem; color:var(--ink-soft);
  background:var(--bg-soft); border-radius:8px; padding:.35rem .6rem;
}
.day-foot{
  background:#eef6f1; border:1px dashed var(--mint); border-radius:var(--radius-s);
  padding:.6rem .8rem; font-size:.9rem; margin-bottom:1rem;
}
.day-foot p{ margin:0; }

/* ---------- Yer kartları ---------- */
.cards{ display:grid; grid-template-columns:1fr; gap:.9rem; }
.place-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:.95rem 1rem 1rem;
}
.place-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.place-head h2{ margin:.1rem 0 .15rem; font-size:1.08rem; }
.place-meta{ color:var(--ink-soft); font-size:.85rem; font-weight:600; margin:.1rem 0 .45rem; }
.place-facts{ margin:.35rem 0 .55rem; padding-left:1.1rem; }
.place-facts li{ margin:.4rem 0; font-size:.93rem; }
.place-links{ margin-top:.3rem; }

.badge{
  display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.3px;
  padding:.22rem .55rem; border-radius:999px; white-space:nowrap;
}
.b-must{ background:#fde8df; color:#b0401f; }
.b-kid{ background:#e3f2ec; color:#1f6b52; }
.b-free{ background:#e8f0fb; color:var(--primary-d); }
.b-optional{ background:#f6ecd8; color:#8a6414; }
.b-turk{ background:#fde8df; color:#b0401f; }
.b-sert{ background:#e3f2ec; color:#1f6b52; }
.b-dogu{ background:#efe9f7; color:#5d3f8c; }
.b-market{ background:#e8f0fb; color:var(--primary-d); }

.maps-link{
  display:inline-block; font-size:.86rem; font-weight:700; text-decoration:none;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:999px;
  padding:.4rem .8rem;
}
.maps-link:hover{ border-color:var(--primary); background:#fff; }

/* ---------- Restoranlar ---------- */
.filter-chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin:.2rem 0 .9rem; }
.fchip{
  font:inherit; font-size:.84rem; font-weight:700; cursor:pointer;
  background:#fff; color:var(--ink-soft);
  border:1.5px solid var(--line); border-radius:999px; padding:.42rem .8rem;
}
.fchip:hover{ border-color:var(--primary); color:var(--primary); }
.fchip.is-on{ background:var(--coral); border-color:var(--coral); color:#fff; }

.resto-grid{ display:grid; grid-template-columns:1fr; gap:.7rem; margin-bottom:1rem; }
.resto-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:.8rem .9rem; box-shadow:var(--shadow);
}
.resto-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.resto-head h3{ margin:0; font-size:1rem; }
.resto-meta{ color:var(--ink-soft); font-size:.82rem; font-weight:600; margin:.15rem 0 .3rem; }
.resto-card p{ margin:.25rem 0 .45rem; font-size:.92rem; }
.resto-card.is-hidden{ display:none; }

/* ---------- Fiyat tablosu ---------- */
.price-table{ border:1px solid var(--line); border-radius:var(--radius-s); overflow:hidden; }
.pr-row{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.55rem .8rem; border-bottom:1px solid var(--line); font-size:.93rem;
}
.pr-row:last-child{ border-bottom:none; }
.pr-row span:last-child{ font-weight:800; white-space:nowrap; }
.pr-head{ background:var(--primary); color:#fff; font-weight:700; }
.pr-head span:last-child{ font-weight:700; }

/* ---------- Deyimler ---------- */
.ph-search{
  width:100%; font:inherit; font-size:1rem;
  padding:.7rem .9rem; border-radius:var(--radius-s);
  border:1.5px solid var(--line); background:#fff; margin-bottom:.7rem;
}
.ph-search:focus{ border-color:var(--primary); outline:none; }

.ph-group-title{ font-size:1.08rem; margin:1.3rem 0 .5rem; }
.ph-group.is-hidden, .ph-group-title.is-hidden{ display:none; }

.ph-group{ display:grid; grid-template-columns:1fr; gap:.55rem; }
.phrase{
  font:inherit; text-align:left; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:.7rem;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-s);
  padding:.7rem .85rem; min-height:56px;
}
.phrase:hover{ border-color:var(--primary); }
.phrase:active{ transform:scale(.985); }
.ph-tr{ font-weight:700; font-size:.94rem; }
.ph-es{ color:var(--ink-soft); font-size:.88rem; font-style:italic; text-align:right; }
.phrase.b-halal{ border-left:4px solid var(--mint); }
.phrase.b-acil{ border-left:4px solid var(--coral); }
.phrase.is-hidden{ display:none; }

/* Deyim büyük kart (karşıdakine göster) */
.phrase-overlay{
  position:fixed; inset:0; z-index:90;
  background:rgba(13,60,103,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:1.2rem;
}
.phrase-overlay[hidden]{ display:none; }
.phrase-card{
  position:relative; width:min(560px,100%); max-height:86vh; overflow:auto;
  background:#fff; border-radius:22px; box-shadow:var(--shadow-l);
  padding:2rem 1.4rem 1.4rem; text-align:center;
}
.phrase-close{
  position:absolute; top:.7rem; right:.7rem;
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--line); background:#fff; cursor:pointer; font-size:1.05rem;
}
.p-es{ font-size:clamp(1.5rem,6vw,2.2rem); font-weight:800; color:var(--primary-d); margin:.3rem 0 .4rem; line-height:1.25; }
.p-say{ color:var(--coral); font-weight:700; letter-spacing:.05em; margin:.15rem 0 .9rem; }
.p-en{ margin:.2rem 0; font-size:1.02rem; }
.p-tr{ color:var(--ink-soft); margin:.2rem 0 .9rem; font-size:.95rem; }
.p-hint{
  font-size:.8rem; color:var(--ink-soft);
  background:var(--bg-soft); border-radius:999px; padding:.35rem .7rem; display:inline-block;
}

/* ---------- Yukarı çık ---------- */
.totop{
  position:fixed; right:1rem; bottom:1rem; z-index:60;
  width:48px; height:48px; border-radius:50%;
  background:var(--primary); color:#fff; font-size:1.25rem; border:none;
  box-shadow:var(--shadow-l); cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.totop.is-visible{ opacity:1; pointer-events:auto; }

/* ---------- Alt bilgi ---------- */
.footer{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(20,83,140,.05), rgba(20,83,140,.1));
  padding:1.4rem 0 2rem; margin-top:1.5rem;
}
.footer p{ margin:.3rem 0; }

/* ---------- Geniş ekranlar ---------- */
@media (min-width:720px){
  body{ font-size:17px; }
  .quick-grid{ grid-template-columns:repeat(3,1fr); }
  .cards{ grid-template-columns:1fr 1fr; }
  .resto-grid{ grid-template-columns:1fr 1fr; }
  .ph-group{ grid-template-columns:1fr 1fr; }
  .day-tabs{ grid-template-columns:repeat(6,1fr); }
  .hero-inner{ padding:3.2rem 1.5rem 3.4rem; }
  .tl-item{ grid-template-columns:76px 1fr; }
  .weather-table{ grid-template-columns:repeat(6,1fr); }
}

@media (min-width:980px){
  .cards{ grid-template-columns:1fr 1fr; }
}

/* ---------- Yazdırma ---------- */
@media print{
  .topbar,.pills,.totop,.install-btn{ display:none !important; }
  html.js .view{ display:block !important; }
  .day-panel{ break-inside:avoid; }
}

/* ============================================================
   Plan: akıllı rehber kartları (v2)
   ============================================================ */
.day-summary{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 .2rem; }
.day-summary span{
  background:#e8f0fb; color:var(--primary-d);
  border-radius:999px; padding:.3rem .7rem;
  font-size:.78rem; font-weight:700;
}
.stop-dur{
  float:right; margin-left:.45rem;
  font-size:.72rem; font-weight:800; line-height:1.9;
  color:#8a6414; background:#f6ecd8;
  border-radius:999px; padding:.15rem .6rem; white-space:nowrap;
}
.stop-desc{ font-size:.96rem; margin:.4rem 0; }
.stop-guide{
  background:#fdf6e7; border-left:4px solid var(--gold);
  border-radius:8px; padding:.55rem .75rem;
  font-size:.92rem; margin:.55rem 0;
}
.stop-details{
  display:flex; flex-direction:column; gap:.3rem;
  margin:.55rem 0; padding:.55rem .7rem;
  background:var(--bg-soft); border-radius:10px;
}
.sd{ font-size:.86rem; color:var(--ink-soft); }
.kid-note{
  background:#e3f2ec; border-left:4px solid var(--mint);
  border-radius:8px; padding:.5rem .75rem;
  font-size:.9rem; margin:.55rem 0;
}
.tl-body h3{ overflow:hidden; }
@media (min-width:720px){
  .stop-details{ flex-direction:row; flex-wrap:wrap; gap:.4rem 1.1rem; }
  .sd{ flex:0 1 auto; }
}

/* ============================================================
   Responsive düzeltmeler (mobil taşmalar)
   ============================================================ */
html, body{ max-width:100%; }
body{ overflow-x:clip; }

/* kontrol listesi: metin tek flex öğesi olarak sarılır */
.cl-text{ min-width:0; flex:1; overflow-wrap:break-word; }
.check-list label{ align-items:flex-start; }

/* ilerleme etiketi barın dışında, yanında */
.progress-row{ display:flex; align-items:center; gap:.65rem; margin:.2rem 0 .8rem; }
.progress-label{ font-size:.82rem; font-weight:800; color:var(--primary-d); white-space:nowrap; }
.progress-bar{ min-width:8px; }

/* genel sarma güvenliği */
.card p, .card li, .sec-sub, .hero-lead, .cl-text, .quick-card small,
.chip, .em-label, .place-meta, .resto-meta, .sd{ overflow-wrap:break-word; }
.chip{ max-width:100%; }

/* çok dar telefonlar için hızlı kartlar alt alta */
@media (max-width:379px){
  .quick-grid{ grid-template-columns:1fr; }
  .weather-table .wt-cell{ font-size:.84rem; padding:.4rem .1rem; }
}