/* Türkiye'nin Mimari Çıkartma Haritası (/turkiye). Sayfa zemini her temada BEYAZ (kullanıcı isteği): renkler bu yüzden
 * site.css'in gece/gündüz değişkenlerinden değil, aşağıdaki yerel değişkenlerden gelir. Harita yalnızca siyah il
 * sınırlarıdır; renk çıkartmalarda ve dönem süzgecinde. */
.tk{
  --tk-ink:#1d2330; --tk-soft:#5A6577; --tk-line:#D9DEE6; --tk-hot:#FFF3C4;
  background:#fff; color:var(--tk-ink); color-scheme:light;
  padding-bottom:96px; overflow-x:clip;
}
.tk-era-ilk{--era:#E3A400; --era-ink:#8A6200; --era-tint:#FCEFC7;}
.tk-era-ortacag{--era:#8746E8; --era-ink:#6A2FC4; --era-tint:#EBDDFC;}
.tk-era-selcuklu{--era:#0E9466; --era-ink:#0A7451; --era-tint:#D3F0E3;}
.tk-era-osmanli{--era:#2F5FE8; --era-ink:#2047C2; --era-tint:#DCE5FC;}
.tk-era-cumhuriyet{--era:#EE5A36; --era-ink:#B23A17; --era-tint:#FCE0D7;}
.tk .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.tk-defs{position:absolute; width:0; height:0; overflow:hidden;}

/* ---------- Giriş ---------- */
.tk-hero{
  max-width:var(--content-max); margin:0 auto; padding:40px var(--gutter) 28px;
  display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(260px, 1fr); gap:12px 48px; align-items:end;
}
.tk-crumb, .tk-eyebrow, .tk-title, .tk-lead{grid-column:1;}
.tk-crumb{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tk-soft); display:flex; gap:8px;}
.tk-crumb a{color:var(--tk-soft);}
.tk-crumb a:hover{color:var(--tk-ink);}
.tk-crumb [aria-current]{color:var(--tk-ink);}
.tk-eyebrow{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0;}
.tk-eyebrow span{
  font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  border:1.5px solid var(--tk-ink); border-radius:100px; padding:4px 12px; background:#fff;
}
.tk-eyebrow span:nth-child(1){background:#FCEFC7; transform:rotate(-2deg);}
.tk-eyebrow span:nth-child(2){background:#DCE5FC; transform:rotate(1.5deg);}
.tk-eyebrow span:nth-child(3){background:#FCE0D7; transform:rotate(-1deg);}
.tk-title{
  font-size:clamp(34px, 5.2vw, 62px); line-height:var(--lh-display, 1.16); letter-spacing:-.025em; font-weight:800;
  margin:18px 0 0; max-width:15ch;
}
.tk-title-mark{
  display:inline-block; background:#fff; border:2.5px solid var(--tk-ink); border-radius:16px; padding:0 .22em;
  box-shadow:0 0 0 5px #fff, 0 7px 0 4px rgba(29,35,48,.16); transform:rotate(-3deg); color:#EE5A36; margin:.08em 0;
}
.tk-lead{font-size:17px; line-height:1.6; color:var(--tk-soft); max-width:60ch; margin:18px 0 0;}
.tk-progress{
  grid-column:2; grid-row:2 / span 3; align-self:end;
  border:2px solid var(--tk-ink); border-radius:22px; padding:18px 20px 16px; background:#fff;
  box-shadow:0 5px 0 var(--tk-ink); transform:rotate(1.2deg);
}
.tk-progress-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-weight:700;}
.tk-progress-top > span{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--tk-soft);}
.tk-progress-top strong{font-size:30px; font-weight:800; letter-spacing:-.02em;}
.tk-progress-bar{
  height:14px; border:2px solid var(--tk-ink); border-radius:100px; margin:10px 0 10px; overflow:hidden;
  background:repeating-linear-gradient(-45deg, #fff 0 6px, #F1F3F7 6px 12px);
}
.tk-progress-bar span{
  display:block; height:100%; width:0; border-right:2px solid var(--tk-ink); transition:width .5s cubic-bezier(.2,1,.3,1);
  background:linear-gradient(90deg, #E3A400 0 20%, #8746E8 0 40%, #0E9466 0 60%, #2F5FE8 0 80%, #EE5A36 0);
}
.tk-progress-bar span.is-zero{border-right:0;}
.tk-progress-note{margin:0; font-size:13.5px; line-height:1.5; color:var(--tk-soft);}

/* ---------- Süzgeç ---------- */
.tk-tools{
  max-width:var(--content-max); margin:0 auto; padding:16px var(--gutter) 6px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px;
}
.tk-eras{display:flex; flex-wrap:wrap; gap:8px;}
.tk-era{
  display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:13.5px; font-weight:700; color:var(--tk-ink);
  background:#fff; border:1.5px solid var(--tk-line); border-radius:100px; padding:7px 13px 7px 10px; cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s;
}
.tk-era b{font-weight:800; font-size:12px; color:var(--tk-soft);}
.tk-era:hover{border-color:var(--tk-ink); transform:translateY(-1px);}
.tk-era[aria-pressed="true"]{border-color:var(--tk-ink); background:var(--era-tint, #F1F3F7); box-shadow:0 2px 0 var(--tk-ink);}
.tk-era-dot{width:12px; height:12px; border-radius:50%; background:var(--era); border:1.5px solid var(--tk-ink); flex-shrink:0;}
.tk-era-all{background:conic-gradient(#E3A400 0 20%, #8746E8 0 40%, #0E9466 0 60%, #2F5FE8 0 80%, #EE5A36 0);}
.tk-actions{display:flex; gap:10px; flex-wrap:wrap;}
.tk-search{position:relative; display:flex; align-items:center;}
.tk-search svg{position:absolute; left:13px; color:var(--tk-soft); pointer-events:none;}
.tk-search input{
  font:inherit; font-size:14px; color:var(--tk-ink); background:#fff; width:220px;
  border:1.5px solid var(--tk-line); border-radius:100px; padding:9px 14px 9px 38px;
}
.tk-search input:focus{outline:none; border-color:var(--tk-ink); box-shadow:0 0 0 3px #FCEFC7;}
.tk-random{
  display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:14px; font-weight:800; cursor:pointer;
  color:#fff; background:#EE5A36; border:2px solid var(--tk-ink); border-radius:100px; padding:8px 16px;
  box-shadow:0 3px 0 var(--tk-ink); transition:transform .12s, box-shadow .12s;
}
.tk-random:hover{transform:translateY(-1px) rotate(-1.5deg); box-shadow:0 4px 0 var(--tk-ink);}
.tk-random:active{transform:translateY(2px); box-shadow:0 1px 0 var(--tk-ink);}
.tk-random svg{transition:transform .4s;}
.tk-random:hover svg{transform:rotate(180deg);}

/* ---------- Harita ---------- */
.tk-map-wrap{max-width:1480px; margin:6px auto 0; padding:0 12px;}
.tk-map-scroll{overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin;}
.tk-map{display:block; width:100%; min-width:900px; height:auto; overflow:visible; font-family:inherit;}
.tk-il{fill:#fff; stroke:var(--tk-ink); stroke-width:.75px; vector-effect:non-scaling-stroke; stroke-linejoin:round; transition:fill .2s;}
.tk-il.is-hot{fill:var(--tk-hot);}
.tk-il.is-dim{fill:#fff;}
.tk-lakes{fill:#fff; stroke:var(--tk-ink); stroke-width:.6px; vector-effect:non-scaling-stroke;}
.tk-outline{fill:none; stroke:var(--tk-ink); stroke-width:2px; vector-effect:non-scaling-stroke; stroke-linejoin:round; pointer-events:none;}
.tk-seas text{fill:#8B95A7; font-size:13px; font-weight:600; font-style:italic; letter-spacing:.42em; text-anchor:middle;}
.tk-seas .tk-sea-s{font-size:9px; letter-spacing:.06em;}
.tk-compass circle{fill:#fff; stroke:var(--tk-ink); stroke-width:1.2px;}
.tk-compass path{fill:#fff; stroke:var(--tk-ink); stroke-width:1.2px; stroke-linejoin:round;}
.tk-compass .tk-compass-n{fill:var(--tk-ink);}
.tk-compass text, .tk-scale text{fill:var(--tk-ink); font-size:10px; font-weight:800; text-anchor:middle;}
.tk-scale path{fill:none; stroke:var(--tk-ink); stroke-width:1.2px;}
.tk-scale rect{fill:var(--tk-ink);}
.tk-leaders path{stroke:var(--tk-ink); stroke-width:.8px; vector-effect:non-scaling-stroke; fill:none; stroke-dasharray:2 2;}
.tk-leaders circle{fill:var(--tk-ink);}
.tk-st{cursor:pointer; outline:none;}
.tk-pop{transform-box:fill-box; transform-origin:center; transition:transform .22s cubic-bezier(.3,1.5,.5,1), opacity .2s;}
.tk-st:hover .tk-pop, .tk-st:focus-visible .tk-pop, .tk-st.is-hot .tk-pop{transform:scale(1.85);}
.tk-st:focus-visible use{outline:none;}
.tk-st.is-dim .tk-pop{opacity:.14;}
.tk-st.is-dim{pointer-events:none;}
.tk-check{display:none;}
.tk-st.is-visited .tk-check{display:inline;}
.tk-check circle{fill:#0E9466; stroke:#fff; stroke-width:1.6px;}
.tk-check path{fill:none; stroke:#fff; stroke-width:1.8px; stroke-linecap:round; stroke-linejoin:round;}
/* Yapıştırma: harita ekrana girince çıkartmalar sırayla “şap” diye yapışır (JS --i verir; JS yoksa hepsi baştan yerinde). */
.tk-js .tk-map:not(.is-in) .tk-pop{opacity:0;}
.tk-map.is-in .tk-pop{animation:tk-slap .55s cubic-bezier(.2,1.3,.4,1) backwards; animation-delay:calc(var(--i, 0) * 16ms);}
@keyframes tk-slap{
  0%{transform:scale(2.6) rotate(-14deg); opacity:0;}
  55%{transform:scale(.9) rotate(2deg); opacity:1;}
  100%{transform:none;}
}
.tk-map-cap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--tk-soft); padding:6px var(--gutter) 0;}
.tk-swipe{display:none; font-weight:700;}

/* ---------- Albüm ---------- */
.tk-album{max-width:var(--content-max); margin:56px auto 0; padding:0 var(--gutter); scroll-margin-top:80px;}
.tk-album-head{display:flex; align-items:end; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin-bottom:20px;}
.tk-h2{font-size:clamp(26px, 3.4vw, 38px); line-height:var(--lh-display, 1.16); letter-spacing:-.02em; font-weight:800; margin:0;}
.tk-album-sub{margin:0; color:var(--tk-soft); font-size:14.5px;}
.tk-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(158px, 1fr)); gap:14px;}
.tk-item{position:relative; scroll-margin-top:90px;}
.tk-item[hidden]{display:none;}
.tk-item-btn{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; cursor:pointer;
  font:inherit; color:var(--tk-ink); background:#fff; border:1.5px dashed #C3CAD5; border-radius:20px; padding:10px 10px 14px;
  transition:border-color .15s, background .15s, transform .2s;
}
.tk-item-btn:hover, .tk-item-btn:focus-visible{border-style:solid; border-color:var(--tk-ink); background:var(--era-tint); outline:none;}
.tk-item-art{width:118px; height:118px; display:block; transition:transform .25s cubic-bezier(.3,1.5,.5,1);}
.tk-item:nth-child(odd) .tk-item-art{transform:rotate(-4deg);}
.tk-item:nth-child(even) .tk-item-art{transform:rotate(3deg);}
.tk-item-btn:hover .tk-item-art, .tk-item-btn:focus-visible .tk-item-art{transform:scale(1.08) rotate(0);}
.tk-item-il{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--tk-soft);}
.tk-item-plate{background:var(--era); color:#fff; border-radius:100px; padding:1px 7px; font-size:11px; letter-spacing:.03em;}
.tk-item-name{font-size:14.5px; font-weight:700; line-height:1.3;}
.tk-item-date, .tk-item-text{font-size:13px; color:var(--tk-soft); margin:6px 6px 0;}
.tk-js .tk-item-date, .tk-js .tk-item-text{display:none;}
.tk-item-stamp{
  position:absolute; top:12px; right:8px; display:none;
  font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:#D2342B;
  border:2px solid #D2342B; border-radius:6px; padding:2px 6px; transform:rotate(12deg); background:rgba(255,255,255,.85);
}
.tk-item.is-visited .tk-item-stamp{display:block;}
.tk-item.is-visited .tk-item-btn{border-style:solid; border-color:#9BD3BD;}
.tk-empty{color:var(--tk-soft); font-size:15px; margin:20px 0 0;}
.tk-noscript{max-width:var(--content-max); margin:24px auto 0; padding:0 var(--gutter); color:var(--tk-soft);}

/* ---------- Çıkartma kartı (pencere) ---------- */
.tk-card{
  width:min(760px, calc(100% - 24px)); max-height:calc(100% - 24px); padding:0; overflow:auto;
  border:2.5px solid var(--tk-ink); border-radius:28px; background:#fff; color:var(--tk-ink);
  box-shadow:0 10px 0 var(--tk-ink); color-scheme:light;
}
.tk-card[open]{display:grid; grid-template-columns:300px minmax(0, 1fr); animation:tk-card-in .3s cubic-bezier(.2,1.3,.4,1);}
.tk-card::backdrop{background:rgba(29,35,48,.42); backdrop-filter:blur(3px);}
@keyframes tk-card-in{from{transform:translateY(16px) scale(.96) rotate(-1deg); opacity:0;}}
.tk-card-art{
  display:flex; align-items:center; justify-content:center; padding:28px; background-color:var(--era-tint);
  background-image:radial-gradient(rgba(29,35,48,.13) 1.2px, transparent 1.4px); background-size:14px 14px;
  border-right:2.5px solid var(--tk-ink);
}
.tk-card-art svg{width:100%; max-width:250px; height:auto; transform:rotate(-5deg); animation:tk-card-st .5s .05s cubic-bezier(.2,1.4,.4,1) backwards;}
@keyframes tk-card-st{from{transform:scale(1.6) rotate(-20deg); opacity:0;}}
.tk-card-body{padding:30px 30px 24px; display:flex; flex-direction:column;}
.tk-card-il{display:flex; align-items:center; gap:8px; margin:0; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--tk-soft);}
.tk-card-il b{background:var(--era); color:#fff; border-radius:100px; padding:2px 9px; font-size:12px;}
.tk-card-name{font-size:clamp(24px, 3vw, 32px); line-height:var(--lh-display, 1.16); letter-spacing:-.02em; margin:10px 0 0; padding-right:36px;}
.tk-card-date{margin:10px 0 0; font-size:13.5px; font-weight:700; color:var(--era-ink);}
.tk-card-text{margin:14px 0 0; font-size:16px; line-height:1.62; flex:1;}
.tk-card-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px;}
.tk-visit{
  display:inline-flex; align-items:center; gap:10px; font:inherit; font-size:15px; font-weight:800; cursor:pointer;
  background:#fff; color:var(--tk-ink); border:2px solid var(--tk-ink); border-radius:100px; padding:9px 18px 9px 12px;
  box-shadow:0 3px 0 var(--tk-ink); transition:transform .12s, box-shadow .12s, background .15s;
}
.tk-visit:hover{transform:translateY(-1px);}
.tk-visit:active{transform:translateY(2px); box-shadow:0 1px 0 var(--tk-ink);}
.tk-visit-box{width:20px; height:20px; border:2px solid var(--tk-ink); border-radius:6px; position:relative; background:#fff;}
.tk-visit[aria-pressed="true"]{background:#D3F0E3;}
.tk-visit[aria-pressed="true"] .tk-visit-box{background:#0E9466;}
.tk-visit[aria-pressed="true"] .tk-visit-box::after{
  content:""; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg);
}
.tk-card-nav{display:flex; gap:8px;}
.tk-nav-btn, .tk-card-close{
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font:inherit; font-size:24px; font-weight:700; line-height:1; color:var(--tk-ink); background:#fff;
  border:2px solid var(--tk-ink); border-radius:50%; transition:background .15s, transform .12s;
}
.tk-nav-btn:hover, .tk-card-close:hover{background:#F1F3F7; transform:translateY(-1px);}
.tk-card-close{position:absolute; top:14px; right:14px; width:38px; height:38px; z-index:1;}

/* ---------- Dar ekran ---------- */
@media (max-width:900px){
  .tk-hero{grid-template-columns:1fr; padding-top:28px;}
  .tk-progress{grid-column:1; grid-row:auto; margin-top:12px; transform:none;}
  .tk-swipe{display:inline;}
  .tk-map-wrap{padding:0;}
  .tk-map-scroll{padding:0 12px;}
}
@media (max-width:640px){
  .tk-actions, .tk-search, .tk-search input{width:100%;}
  .tk-search{flex:1;}
  .tk-eras{flex-wrap:nowrap; overflow-x:auto; margin:0 calc(-1 * var(--gutter)); padding:2px var(--gutter) 6px; scrollbar-width:none;}
  .tk-era{flex-shrink:0;}
  .tk-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;}
  .tk-item-art{width:104px; height:104px;}
  .tk-card[open]{grid-template-columns:1fr;}
  .tk-card-art{border-right:0; border-bottom:2.5px solid var(--tk-ink); padding:18px;}
  .tk-card-art svg{max-width:170px;}
  .tk-card-body{padding:20px 20px 18px;}
}
@media (prefers-reduced-motion:reduce){
  .tk *, .tk *::before{animation:none !important; transition:none !important;}
  .tk-js .tk-map:not(.is-in) .tk-pop{opacity:1;}
}