/*
Theme Name: Çizerimbak
Theme URI: https://cizerimbak.com
Author: Betül Çiftler
Author URI: https://cizerimbak.com
Description: Betül Çiftler'in sanatçı portföy teması. Beyaz zemin üzerinde sade ve modern bir yapı: eskizler haritada çizildikleri yerde küçük görselleriyle gösterilir, defterler temiz bir galeri düzeninde sunulur. Harici font ve görsel isteği yok; tek CSS dosyası.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cizerimbak
Tags: portfolio, custom-colors, one-column, two-columns, three-columns, custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   İÇİNDEKİLER
   01. Tasarım değişkenleri (tokens)
   02. Sıfırlama ve temel kurallar
   03. Tipografi ve bağlantılar
   04. Erişilebilirlik: skip-link, odak, screen-reader-text
   05. Yardımcı sınıflar ve kaplar
   06. Butonlar
   07. Header, logo, navigasyon (mobil hamburger)
   08. Hero
   09. Bölümler ve bölüm başlıkları
   10. Grid, kartlar, rozetler
   11. Harita + Leaflet özelleştirmesi (görsel marker'lar)
   12. Defter grid'i ve tekil defter sayfa galerisi
   13. Tekil içerik tipografisi, sayfalama, arşiv başlığı
   14. Arama ve 404
   15. Video gömme
   15b. Vitrin, eser detayı ve talep formu
   16. Footer
   17. Geniş ekran ince ayarları
   18. prefers-reduced-motion
   ========================================================================= */

/* =========================================================================
   01. TASARIM DEĞİŞKENLERİ
   ========================================================================= */
:root{
  --cb-vino:      #9A2F51;   /* primary — vurgular, butonlar, linkler */
  --cb-vino-koyu: #7C2340;
  --cb-fistik:    #BAC477;   /* ikincil — küçük detaylarda, ölçülü */
  --cb-murekkep:  #1C1917;   /* metin */
  --cb-gri:       #6F6862;   /* ikincil metin */
  --cb-zemin:     #FFFFFF;   /* sayfa zemini */
  --cb-yumusak:   #FAF9F7;   /* görsel zemini, hafif dolgu alanları */
  --cb-cizgi:     #EAE6E1;   /* ince ayraç ve kart kenarlığı */
  --cb-font: "Segoe UI", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --cb-radius: 12px;
  --cb-radius-kucuk: 8px;
  --cb-golge: 0 1px 2px rgba(28,25,23,.05);
  --cb-golge-hover: 0 10px 30px rgba(28,25,23,.10);
  --cb-gecis: .2s ease;
  --cb-kap-genislik: 1160px;
}

/* =========================================================================
   02. SIFIRLAMA VE TEMEL KURALLAR
   ========================================================================= */
*,
*::before,
*::after{
  box-sizing: border-box;
}

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

body{
  margin: 0;
  font-family: var(--cb-font);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cb-murekkep);
  background: var(--cb-zemin);
  overflow-wrap: break-word;
}

img,
svg,
video,
iframe{
  max-width: 100%;
  height: auto;
}

img{
  display: block;
}

figure{
  margin: 0 0 1.25rem;
}

button,
input,
select,
textarea{
  font: inherit;
  color: inherit;
}

button{
  cursor: pointer;
}

main{
  display: block;
}

/* Klasik WP hizalama sınıfları */
.alignleft{ float: left; margin: .25rem 1.25rem 1rem 0; }
.alignright{ float: right; margin: .25rem 0 1rem 1.25rem; }
.aligncenter{ display: block; margin-left: auto; margin-right: auto; }
.wp-caption{ max-width: 100%; }
.wp-caption-text{
  font-size: .85rem;
  color: var(--cb-gri);
  padding: .35rem .25rem 0;
}

/* =========================================================================
   03. TİPOGRAFİ VE BAĞLANTILAR
   ========================================================================= */
h1, h2, h3, h4, h5, h6{
  font-family: var(--cb-font);
  line-height: 1.15;
  color: var(--cb-murekkep);
  margin: 0 0 .6em;
  font-weight: 700;
  letter-spacing: -.02em;
}

h1{ font-size: clamp(1.9rem, 4.5vw, 2.6rem); }
h2{ font-size: clamp(1.4rem, 3vw, 1.8rem); }
h3{ font-size: clamp(1.15rem, 2.2vw, 1.3rem); }
h4{ font-size: 1.05rem; }

p{
  margin: 0 0 1.15em;
}

a{
  color: var(--cb-vino);
  text-decoration: none;
  transition: color var(--cb-gecis);
}

a:hover{
  color: var(--cb-vino-koyu);
  text-decoration: underline;
  text-underline-offset: 3px;
}

::selection{
  background: var(--cb-vino);
  color: #fff;
}

hr{
  border: 0;
  border-top: 1px solid var(--cb-cizgi);
  margin: 2.5rem 0;
}

blockquote{
  margin: 1.5rem 0;
  padding: .25rem 1.5rem;
  border-left: 3px solid var(--cb-vino);
  color: var(--cb-gri);
}

code, pre, kbd{
  font-family: "SF Mono", Consolas, Menlo, monospace;
  font-size: .92em;
  background: var(--cb-yumusak);
  border-radius: 6px;
}

code, kbd{ padding: .1em .4em; }

pre{
  padding: 1rem 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--cb-cizgi);
}

pre code{ background: none; padding: 0; }

table{
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
}

th, td{
  padding: .6rem .8rem;
  text-align: left;
  border-bottom: 1px solid var(--cb-cizgi);
}

th{
  font-weight: 600;
}

/* =========================================================================
   04. ERİŞİLEBİLİRLİK
   ========================================================================= */
.screen-reader-text{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link,
.cb-skip-link{
  position: absolute;
  top: -100px;
  left: .75rem;
  z-index: 2000;
  padding: .6rem 1.1rem;
  background: var(--cb-vino);
  color: #fff;
  border-radius: 0 0 var(--cb-radius-kucuk) var(--cb-radius-kucuk);
  text-decoration: none;
  font-weight: 600;
  transition: top .2s ease;
}

.skip-link:focus,
.cb-skip-link:focus{
  top: 0;
  color: #fff;
  outline: 2px solid var(--cb-murekkep);
  outline-offset: 2px;
}

:focus{
  outline: 2px solid var(--cb-vino);
  outline-offset: 2px;
}

:focus:not(:focus-visible){
  outline: none;
}

:focus-visible{
  outline: 2px solid var(--cb-vino);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================================
   05. YARDIMCI SINIFLAR VE KAPLAR
   ========================================================================= */
.gizli{
  display: none !important;
}

.cb-kap,
.cb-icerik > .cb-kapsayici,
.cb-kapsayici{
  width: min(100% - 3rem, var(--cb-kap-genislik));
  margin-inline: auto;
}

.cb-ana{
  display: block;
}

.cb-dar{
  width: min(100% - 3rem, 44rem);
  margin-inline: auto;
}

.cb-ayrac{
  border: 0;
  border-top: 1px solid var(--cb-cizgi);
}

/* =========================================================================
   06. BUTONLAR
   ========================================================================= */
.cb-btn,
.cb-btn-cizgi{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid var(--cb-vino);
  transition: background var(--cb-gecis), color var(--cb-gecis),
              border-color var(--cb-gecis), box-shadow var(--cb-gecis);
}

.cb-btn{
  background: var(--cb-vino);
  color: #fff;
}

.cb-btn:hover{
  background: var(--cb-vino-koyu);
  border-color: var(--cb-vino-koyu);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--cb-golge-hover);
}

.cb-btn-cizgi{
  background: transparent;
  color: var(--cb-vino);
}

.cb-btn-cizgi:hover{
  background: var(--cb-vino);
  color: #fff;
  text-decoration: none;
}

/* =========================================================================
   07. HEADER, LOGO, NAVİGASYON
   ========================================================================= */
.cb-header{
  position: sticky;
  top: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem max(1.5rem, calc((100% - var(--cb-kap-genislik)) / 2));
  background: var(--cb-zemin);
  border-bottom: 1px solid var(--cb-cizgi);
}

/* Logo: "Çizerim" mürekkep + "bak" vino */
.cb-logo{
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--cb-murekkep);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
}

.cb-logo:hover{
  color: var(--cb-murekkep);
  text-decoration: none;
}

.cb-logo-vurgu{
  color: var(--cb-vino);
}

/* Hamburger butonu — mobilde görünür */
.cb-nav-ac{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius-kucuk);
  transition: border-color var(--cb-gecis), background var(--cb-gecis);
}

.cb-nav-ac span{
  display: block;
  width: 18px;
  height: 2px;
  background: var(--cb-murekkep);
  border-radius: 2px;
  transition: transform var(--cb-gecis), opacity var(--cb-gecis);
}

.cb-nav-ac:hover{
  border-color: var(--cb-vino);
}

body.cb-menu-acik .cb-nav-ac span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}

body.cb-menu-acik .cb-nav-ac span:nth-child(2){
  opacity: 0;
}

body.cb-menu-acik .cb-nav-ac span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobil menü: header altında açılan panel */
.cb-nav{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1090;
  background: var(--cb-zemin);
  border-bottom: 1px solid var(--cb-cizgi);
  padding: .5rem 0;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--cb-gecis), transform var(--cb-gecis), visibility var(--cb-gecis);
}

body.cb-menu-acik .cb-nav{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.cb-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cb-nav a{
  display: block;
  padding: .75rem clamp(1.5rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--cb-murekkep);
  text-decoration: none;
  transition: color var(--cb-gecis), background var(--cb-gecis);
}

.cb-nav a:hover{
  color: var(--cb-vino);
  background: var(--cb-yumusak);
  text-decoration: none;
}

.cb-nav .current-menu-item > a,
.cb-nav .current_page_item > a{
  color: var(--cb-vino);
  font-weight: 600;
}

/* Masaüstü menü ≥900px: yatay şerit */
@media (min-width: 900px){
  .cb-nav-ac{
    display: none;
  }

  .cb-nav{
    position: static;
    background: none;
    border: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .cb-nav ul{
    flex-direction: row;
    align-items: center;
    gap: .25rem;
  }

  .cb-nav a{
    padding: .45rem .8rem;
    border-radius: 999px;
    font-size: .95rem;
    background: none;
  }

  .cb-nav a:hover{
    background: var(--cb-yumusak);
  }
}

/* =========================================================================
   08. HERO
   ========================================================================= */
.cb-hero{
  width: min(100% - 3rem, var(--cb-kap-genislik));
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem);
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.cb-hero-baslik{
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -.035em;
  margin-bottom: .3em;
}

.cb-hero-alt{
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--cb-vino);
  font-weight: 600;
  margin-bottom: .75rem;
}

.cb-hero-tanitim{
  font-size: 1.08rem;
  color: var(--cb-gri);
  max-width: 34rem;
  margin-bottom: 1.75rem;
}

.cb-hero-gorsel img{
  width: 100%;
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius);
  background: var(--cb-zemin);
}

/* Hero gösterisi: eserler kendiliğinden çapraz geçişle değişir; kontrol yok.
   Görsel kırpılmaz, etrafında dolgu/bulanıklık yok; başlık masaüstünde
   görselin ALTINDA ayrı bir satırda, mobilde hiç yok. */
.cb-hero-gosteri{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.cb-hero-slayt{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 1.2s ease;
  text-decoration: none;
  color: var(--cb-murekkep);
}

.cb-hero-slayt:hover,
.cb-hero-slayt:focus,
.cb-hero-slayt:focus-visible{
  text-decoration: none;
  color: var(--cb-murekkep);
}

.cb-hero-slayt.cb-aktif{
  opacity: 1;
  z-index: 1;
}

.cb-hero-resim-alan{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cb-hero-resim{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius);
  background: var(--cb-zemin);
  box-shadow: var(--cb-golge);
}

.cb-hero-yazi{
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .15rem;
  padding: .85rem .15rem 0;
  min-height: 2.6rem;
}

.cb-hero-yazi-baslik{
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--cb-murekkep);
}

@media (min-width: 900px){
  .cb-hero-gosteri{
    aspect-ratio: 5 / 4;
  }

  .cb-hero-yazi{
    display: flex;
  }
}

@media (min-width: 900px){
  .cb-hero{
    grid-template-columns: 1.05fr .95fr;
    gap: 4rem;
  }
}

/* Bana ulaş (anasayfa altı) — satın alma kutusuyla aynı dil */
.cb-iletisim{
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--cb-yumusak);
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius);
}

.cb-iletisim-duzen{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

@media (min-width: 900px){
  .cb-iletisim-duzen{
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 3rem;
  }
}

.cb-iletisim-baslik{
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
}

.cb-iletisim-not{
  margin: 0 0 1.1rem;
  font-size: .95rem;
  color: var(--cb-gri);
  max-width: 30rem;
}

.cb-iletisim-sosyal a{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--cb-vino);
  text-decoration: none;
}

.cb-iletisim-sosyal a:hover{
  text-decoration: underline;
}

/* Hakkında: portre + metin. Masaüstünde tek ekrana sığar: küçük portre,
   iki sütunlu metin, dar dikey boşluklar. */
.cb-tekil.cb-hakkinda{
  width: 100%;
  max-width: none;
  padding: 0;
}

.cb-hakkinda-duzen{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.cb-hakkinda-portre{
  margin: 0;
  max-width: 300px;
}

.cb-hakkinda-portre img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cb-radius);
  border: 1px solid var(--cb-cizgi);
  box-shadow: var(--cb-golge-hover);
}

.cb-hakkinda-metin .cb-tekil-baslik{
  margin-bottom: .75rem;
}

.cb-hakkinda-metin .cb-sayfa-baslik{
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
}

.cb-hakkinda-metin .cb-icerik-metin h2{
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cb-vino);
  margin: 0 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--cb-cizgi);
}

.cb-hakkinda-metin .cb-icerik-metin p{
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 .9rem;
}

.cb-hakkinda-metin .cb-icerik-metin p:last-child{
  font-size: .9rem;
  color: var(--cb-gri);
  margin: 1rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--cb-cizgi);
}

@media (min-width: 900px){
  .cb-hakkinda-duzen{
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }

  .cb-hakkinda-portre{
    max-width: none;
  }

  /* Paragraflar iki sütuna akar; başlık ve alt not tam genişlikte kalır. */
  .cb-hakkinda-metin .cb-icerik-metin{
    column-count: 2;
    column-gap: 2.25rem;
  }

  .cb-hakkinda-metin .cb-icerik-metin h2,
  .cb-hakkinda-metin .cb-icerik-metin p:last-child{
    column-span: all;
  }

  .cb-hakkinda-metin .cb-icerik-metin p{
    break-inside: avoid;
  }
}

/* =========================================================================
   09. BÖLÜMLER
   ========================================================================= */
.cb-bolum{
  width: min(100% - 3rem, var(--cb-kap-genislik));
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.25rem) 0;
}

.cb-bolum + .cb-bolum{
  border-top: 1px solid var(--cb-cizgi);
}

.cb-bolum-baslik{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-bottom: 1.25rem;
}

.cb-bolum-baslik h2{
  margin: 0;
}

.cb-bolum-baslik a{
  font-weight: 600;
  font-size: .92rem;
  white-space: nowrap;
}

.cb-bolum-alt{
  margin: -0.75rem 0 1.5rem;
  color: var(--cb-gri);
}

/* =========================================================================
   10. GRID, KARTLAR, ROZETLER
   ========================================================================= */
.cb-grid{
  display: grid;
  grid-template-columns: 1fr;           /* mobil: 1 sütun */
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px){
  .cb-grid{
    grid-template-columns: repeat(2, 1fr);   /* ≥640: 2 sütun */
  }
}

@media (min-width: 900px){
  .cb-grid{
    grid-template-columns: repeat(3, 1fr);   /* ≥900: 3 sütun */
  }
}

.cb-kart{
  display: flex;
  flex-direction: column;
  background: var(--cb-zemin);
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-golge);
  overflow: hidden;
  transition: transform var(--cb-gecis), box-shadow var(--cb-gecis), border-color var(--cb-gecis);
}

.cb-kart:hover{
  transform: translateY(-3px);
  box-shadow: var(--cb-golge-hover);
  border-color: #DFD9D2;
}

.cb-kart-gorsel{
  display: block;
  background: var(--cb-yumusak);
  border-bottom: 1px solid var(--cb-cizgi);
}

.cb-kart-gorsel img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .35s ease;
}

.cb-kart:hover .cb-kart-gorsel img{
  transform: scale(1.03);
}

.cb-kart-icerik{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.1rem 1.25rem 1.25rem;
  flex-grow: 1;
}

.cb-kart-baslik{
  font-size: 1.1rem;
  margin: 0;
}

.cb-kart-baslik a{
  color: var(--cb-murekkep);
  text-decoration: none;
}

.cb-kart-baslik a:hover{
  color: var(--cb-vino);
  text-decoration: none;
}

.cb-kart-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  font-size: .85rem;
  color: var(--cb-gri);
}

.cb-kart p,
.cb-kart-ozet{
  margin: 0;
  font-size: .92rem;
  color: var(--cb-gri);
}

/* Rozet: teknik / tarih / yer etiketi — sade pill */
.cb-rozet{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .16rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cb-gri);
  background: var(--cb-yumusak);
  border: 1px solid var(--cb-cizgi);
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
}

a.cb-rozet:hover{
  color: var(--cb-vino);
  border-color: var(--cb-vino);
  text-decoration: none;
}

.cb-rozet a{
  color: inherit;
  text-decoration: none;
}

/* Tür rozeti — birleşik listede Sergi/Etkinlik ayrımı (vino outline) */
.cb-rozet-tur{
  background: transparent;
  border-color: var(--cb-vino);
  color: var(--cb-vino);
}

/* Vino varyant — tarih rozetleri ve aktif filtre */
.cb-rozet-tarih,
.cb-rozet-aktif{
  background: var(--cb-vino);
  border-color: var(--cb-vino);
  color: #fff;
}

a.cb-rozet-aktif:hover{
  color: #fff;
  border-color: var(--cb-vino-koyu);
  background: var(--cb-vino-koyu);
}

/* Teknik filtre satırı (eskiz arşivi) */
.cb-teknik-filtre{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.75rem;
}

/* =========================================================================
   11. HARİTA + LEAFLET ÖZELLEŞTİRMESİ
   ========================================================================= */
.cb-harita{
  height: clamp(340px, 55vh, 560px);
  width: 100%;
  border-radius: var(--cb-radius);
  border: 1px solid var(--cb-cizgi);
  background: var(--cb-yumusak);
  z-index: 0;               /* leaflet pane'leri header'ın altında kalsın */
  position: relative;
  isolation: isolate;       /* leaflet z-index'lerini içeride tut */
  overflow: hidden;
}

#cb-eskiz-harita{
  height: clamp(260px, 40vh, 420px);
}

/* Görsel marker: pin yerine eskizin küçük görseli */
.leaflet-div-icon,
.cb-marker{
  background: transparent;
  border: 0;
}

.cb-marker-cerceve{
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(28,25,23,.30);
  transition: transform var(--cb-gecis), box-shadow var(--cb-gecis);
}

.cb-marker-cerceve img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cb-marker:hover .cb-marker-cerceve{
  transform: scale(1.15);
  box-shadow: 0 6px 18px rgba(28,25,23,.35);
}

/* Rota haritasında marker köşesindeki sıra numarası rozeti */
.cb-marker-no{
  position: absolute;
  top: -8px;
  left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  background: var(--cb-vino);
  color: #fff;
  font-family: var(--cb-font);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(28,25,23,.3);
}

.cb-marker-cerceve{
  position: relative;
  overflow: visible;
}

.cb-marker-cerceve img{
  border-radius: 7px;
}

/* Popup: sade beyaz kart */
.leaflet-popup-content-wrapper{
  background: var(--cb-zemin);
  color: var(--cb-murekkep);
  border-radius: var(--cb-radius);
  border: 1px solid var(--cb-cizgi);
  box-shadow: var(--cb-golge-hover);
  font-family: var(--cb-font);
}

.leaflet-popup-tip{
  background: var(--cb-zemin);
  border: 1px solid var(--cb-cizgi);
}

.leaflet-popup-content{
  margin: .9rem 1rem;
  font-family: var(--cb-font);
  font-size: .9rem;
  line-height: 1.5;
}

.leaflet-popup-content h3{
  font-size: 1rem;
  margin: 0 0 .15rem;
}

.leaflet-popup-content p{
  margin: 0;
  color: var(--cb-gri);
  font-size: .85rem;
}

.leaflet-popup-content img{
  width: 100%;
  max-height: 130px;
  object-fit: cover;
  border-radius: var(--cb-radius-kucuk);
  margin-bottom: .6rem;
  border: 1px solid var(--cb-cizgi);
}

.leaflet-popup-content a{
  color: var(--cb-murekkep);
  font-weight: 600;
  text-decoration: none;
}

.leaflet-popup-content a:hover{
  color: var(--cb-vino);
}

a.leaflet-popup-close-button{
  color: var(--cb-gri);
  font-family: var(--cb-font);
}

a.leaflet-popup-close-button:hover{
  color: var(--cb-murekkep);
}

.leaflet-control-zoom a{
  color: var(--cb-murekkep);
  background: var(--cb-zemin);
  border-color: var(--cb-cizgi);
  font-family: var(--cb-font);
}

.leaflet-control-zoom a:hover{
  background: var(--cb-yumusak);
}

.leaflet-container{
  font-family: var(--cb-font);
}

.leaflet-container .leaflet-control-attribution{
  background: rgba(255,255,255,.85);
  font-size: .68rem;
}

/* =========================================================================
   12. DEFTER GRİD'İ + TEKİL DEFTER SAYFA GALERİSİ
   ========================================================================= */
.cb-defter-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cb-defter-kapak{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  text-decoration: none;
  color: var(--cb-murekkep);
}

.cb-defter-kapak img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius);
  background: var(--cb-yumusak);
  box-shadow: var(--cb-golge);
  transition: transform var(--cb-gecis), box-shadow var(--cb-gecis);
}

.cb-defter-kapak:hover{
  text-decoration: none;
  color: var(--cb-vino);
}

.cb-defter-kapak:hover img{
  transform: translateY(-3px);
  box-shadow: var(--cb-golge-hover);
}

.cb-defter-kapak-baslik{
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.35;
}

.cb-defter-kapak-rozet{
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,.92);
}

/* Tekil defter üst alanı */
.cb-defter-ust{
  padding-bottom: 0;
}

.cb-defter-ozet{
  max-width: 44rem;
  color: var(--cb-gri);
  font-size: 1.05rem;
}

/* Sayfa galerisi */
.cb-sayfa-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px){
  .cb-sayfa-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

.cb-sayfa-gorsel{
  margin: 0;
}

.cb-sayfa-gorsel img{
  width: 100%;
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius);
  background: var(--cb-yumusak);
}

/* =========================================================================
   12b. ROTA: TANITIM + SIRALI DURAK LİSTESİ
   ========================================================================= */
.cb-rota-ust{
  padding-bottom: 0;
}

.cb-rota-tanitim{
  max-width: 44rem;
  color: var(--cb-gri);
  margin-top: .75rem;
}

.cb-rota-duraklar{
  list-style: none;
  counter-reset: cb-durak;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cb-durak{
  counter-increment: cb-durak;
  position: relative;
  display: flex;
  gap: 1.1rem;
  align-items: center;
  padding: 1rem 1.25rem 1rem 3.4rem;
  background: var(--cb-zemin);
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-golge);
  transition: box-shadow var(--cb-gecis), border-color var(--cb-gecis);
}

.cb-durak:hover{
  box-shadow: var(--cb-golge-hover);
  border-color: #DFD9D2;
}

/* Sıra numarası — haritadaki rozetle aynı biçim */
.cb-durak::before{
  content: counter(cb-durak);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  background: var(--cb-vino);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
}

.cb-durak-gorsel{
  flex-shrink: 0;
  display: block;
}

.cb-durak-gorsel img{
  width: 92px;
  height: 69px;
  object-fit: cover;
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius-kucuk);
  background: var(--cb-yumusak);
}

.cb-durak-icerik{
  min-width: 0;
}

.cb-durak-baslik{
  font-size: 1.05rem;
  margin: 0 0 .15rem;
}

.cb-durak-baslik a{
  color: var(--cb-murekkep);
  text-decoration: none;
}

.cb-durak-baslik a:hover{
  color: var(--cb-vino);
  text-decoration: none;
}

.cb-durak-yer{
  margin: 0;
  font-size: .85rem;
  color: var(--cb-gri);
}

.cb-durak-ozet{
  margin: .35rem 0 0;
  font-size: .92rem;
  color: var(--cb-gri);
}

@media (max-width: 639px){
  .cb-durak-ozet{
    display: none;
  }
}

/* =========================================================================
   13. TEKİL İÇERİK + SAYFALAMA + ARŞİV BAŞLIĞI
   ========================================================================= */
.cb-tekil,
.cb-sayfa-icerik,
article.cb-yazi{
  width: min(100% - 3rem, 44rem);
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3rem) 0;
}

/* Tekil defter, rota ve eser tam genişlik kapsayıcı kullanır */
.cb-tekil-defter,
.cb-tekil-rota,
.cb-tekil-eser{
  width: auto;
}

.cb-tekil-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.5rem;
  font-size: .9rem;
  color: var(--cb-gri);
}

.cb-tekil-gorsel,
.cb-tekil .post-thumbnail{
  margin: 0 0 1.75rem;
}

.cb-tekil-gorsel img,
.cb-tekil .post-thumbnail img{
  width: 100%;
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius);
  background: var(--cb-yumusak);
}

/* Gövde tipografisi */
.cb-govde,
.cb-tekil-icerik,
.entry-content{
  font-size: 1.04rem;
}

.cb-govde h2,
.cb-tekil-icerik h2,
.entry-content h2{
  margin-top: 2rem;
}

.cb-govde ul,
.cb-govde ol,
.cb-tekil-icerik ul,
.cb-tekil-icerik ol,
.entry-content ul,
.entry-content ol{
  padding-left: 1.5rem;
  margin: 0 0 1.25rem;
}

.cb-govde li,
.cb-tekil-icerik li,
.entry-content li{
  margin-bottom: .35rem;
}

.cb-govde ul li::marker,
.cb-tekil-icerik ul li::marker,
.entry-content ul li::marker{
  color: var(--cb-vino);
}

.cb-govde img,
.cb-tekil-icerik img,
.entry-content img{
  border-radius: var(--cb-radius);
  border: 1px solid var(--cb-cizgi);
}

/* Eskiz konum bölümü */
.cb-eskiz-konum{
  margin-top: 1.5rem;
}

.cb-eskiz-yer{
  color: var(--cb-gri);
  margin-top: -0.75rem;
}

/* Önceki/sonraki gönderi gezinmesi */
.cb-gezinme,
.post-navigation .nav-links{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cb-cizgi);
}

.post-navigation{
  width: min(100% - 3rem, var(--cb-kap-genislik));
  margin-inline: auto;
  padding-bottom: 2rem;
}

.cb-gezinme a,
.post-navigation a{
  max-width: 48%;
  font-weight: 600;
  text-decoration: none;
  color: var(--cb-murekkep);
}

.cb-gezinme a:hover,
.post-navigation a:hover{
  color: var(--cb-vino);
  text-decoration: none;
}

.cb-nav-etiket,
.cb-nav-yon{
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--cb-gri);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .2rem;
}

/* Arşiv sayfalama */
.cb-sayfalama,
nav.pagination{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin: 2.5rem 0 1rem;
}

.page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 .6rem;
  font-weight: 600;
  color: var(--cb-murekkep);
  background: var(--cb-zemin);
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius-kucuk);
  text-decoration: none;
  transition: background var(--cb-gecis), color var(--cb-gecis), border-color var(--cb-gecis);
}

a.page-numbers:hover{
  border-color: var(--cb-vino);
  color: var(--cb-vino);
  text-decoration: none;
}

.page-numbers.current{
  background: var(--cb-vino);
  border-color: var(--cb-vino);
  color: #fff;
}

.page-numbers.dots{
  border: 0;
  background: none;
}

/* Arşiv başlık alanı */
.cb-arsiv-baslik,
.page-header{
  width: min(100% - 3rem, var(--cb-kap-genislik));
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 3rem) 0 0;
}

.cb-arsiv .cb-kapsayici > .cb-arsiv-baslik{
  width: auto;
}

.cb-arsiv-aciklama,
.archive-description{
  color: var(--cb-gri);
  max-width: 42rem;
}

.cb-bos-mesaj{
  color: var(--cb-gri);
  padding: 2rem 0;
}

/* =========================================================================
   14. ARAMA VE 404
   ========================================================================= */
.search-form,
.cb-arama-form{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.5rem 0 2rem;
}

.search-form .search-field,
.cb-arama-form input[type="search"],
.cb-arama-form input[type="text"]{
  flex: 1 1 220px;
  padding: .65rem 1.1rem;
  background: var(--cb-zemin);
  border: 1px solid var(--cb-cizgi);
  border-radius: 999px;
  transition: border-color var(--cb-gecis);
}

.search-form .search-field:focus,
.cb-arama-form input:focus{
  border-color: var(--cb-vino);
  outline: none;
}

.search-form .search-submit,
.cb-arama-form button,
.cb-arama-form input[type="submit"]{
  padding: .65rem 1.5rem;
  background: var(--cb-vino);
  color: #fff;
  font-weight: 600;
  border: 1px solid var(--cb-vino);
  border-radius: 999px;
  transition: background var(--cb-gecis);
}

.search-form .search-submit:hover,
.cb-arama-form button:hover{
  background: var(--cb-vino-koyu);
}

/* Sonuç yok / 404 */
.cb-404,
.cb-sonuc-yok,
.error-404{
  width: min(100% - 3rem, 40rem);
  margin: clamp(2rem, 8vw, 5rem) auto;
  text-align: center;
}

.cb-404-kod{
  display: block;
  font-size: clamp(3.5rem, 14vw, 6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--cb-vino);
  margin-bottom: .25em;
}

.cb-404 .search-form,
.error-404 .search-form{
  justify-content: center;
  margin-top: 1.75rem;
}

.cb-404-eylemler{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.5rem;
}

/* =========================================================================
   15. VİDEO GÖMME
   ========================================================================= */
.cb-video-cerceve,
.cb-video-sarma{
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--cb-murekkep);
  border-radius: var(--cb-radius) var(--cb-radius) 0 0;
  overflow: hidden;
}

.cb-video-cerceve iframe,
.cb-video-cerceve video,
.cb-video-sarma iframe,
.cb-video-sarma video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* oEmbed doğrudan basılırsa da düzgün dursun */
.cb-bolum iframe[src*="youtube"],
.cb-bolum iframe[src*="vimeo"],
.cb-govde iframe[src*="youtube"],
.cb-govde iframe[src*="vimeo"],
.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="vimeo"]{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--cb-radius);
  background: var(--cb-murekkep);
}

/* =========================================================================
   15B. VİTRİN, ESER DETAYI VE TALEP FORMU
   ========================================================================= */
/* Kart üstü durum şeridi (Rezerve / Satıldı) */
.cb-kart-eser .cb-kart-gorsel,
.cb-eser-gorsel{
  position: relative;
}

.cb-eser-serit{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: .25rem .8rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: var(--cb-murekkep);
  border-radius: 999px;
  box-shadow: var(--cb-golge);
}

.cb-eser-rezerve .cb-eser-serit{
  background: var(--cb-vino);
}

/* Satılmış eser: görsel soluklaşır, kart etkileşimi sakinleşir */
.cb-eser-satildi .cb-kart-gorsel img,
.cb-eser-satildi .cb-eser-gorsel img{
  filter: grayscale(.6);
  opacity: .75;
}

.cb-eser-satildi .cb-eser-fiyat{
  color: var(--cb-gri);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Kart fiyat satırı */
.cb-eser-fiyat-satir{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .35rem;
  padding-top: .75rem;
  border-top: 1px solid var(--cb-cizgi);
}

.cb-eser-fiyat{
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cb-murekkep);
  white-space: nowrap;
}

.cb-eser-satinal{
  font-size: .88rem;
  font-weight: 600;
  color: var(--cb-vino);
  text-decoration: none;
  white-space: nowrap;
}

.cb-eser-satinal:hover{
  color: var(--cb-vino-koyu);
  text-decoration: underline;
}

/* Vitrin alt notu */
.cb-vitrin-not{
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: var(--cb-yumusak);
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius);
  font-size: .9rem;
  color: var(--cb-gri);
}

.cb-vitrin-not p{
  margin: 0;
}

/* Tekil eser: iki sütunlu düzen */
.cb-eser-duzen{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 900px){
  .cb-eser-duzen{
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 3.5rem;
  }

  .cb-eser-gorsel{
    position: sticky;
    top: 90px;
  }
}

.cb-eser-gorsel{
  margin: 0;
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius);
  overflow: hidden;
  background: var(--cb-yumusak);
  box-shadow: var(--cb-golge);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 2vw, 1.5rem);
}

.cb-eser-gorsel img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cb-eser-bilgi .cb-sayfa-baslik{
  margin-bottom: .5rem;
}

.cb-eser-fiyat-buyuk{
  font-size: 1.7rem;
  margin: 1rem 0 1.25rem;
}

/* Güven veren kısa notlar */
.cb-eser-notlar{
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-size: .92rem;
  color: var(--cb-gri);
}

.cb-eser-notlar li{
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.cb-eser-notlar li::before{
  content: "✓";
  color: var(--cb-fistik);
  font-weight: 700;
  flex-shrink: 0;
}

/* Bilgi sütunu altındaki eylem alanı */
.cb-eser-cta-alan{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cb-cizgi);
}

.cb-eser-cta{
  font-size: 1rem;
  padding: .85rem 1.9rem;
}

.cb-eser-cta-not{
  font-size: .85rem;
  color: var(--cb-gri);
}

/* Satın alma bölümü — tam genişlik, ferah kart */
.cb-satin-alma{
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--cb-yumusak);
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius);
}

.cb-satin-alma-duzen{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

@media (min-width: 900px){
  .cb-satin-alma-duzen{
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 3rem;
  }
}

/* Sol sütun: başlık + eser özeti kutusu */
.cb-satin-alma-eser{
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: 1.25rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--cb-zemin);
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius-kucuk);
}

.cb-satin-alma-eser-ad{
  font-weight: 600;
  color: var(--cb-murekkep);
}

.cb-satin-alma-eser-fiyat{
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cb-vino);
}

.cb-satin-alma-baslik{
  font-size: 1.2rem;
  margin: 0 0 .4rem;
}

.cb-satin-alma-not{
  margin: 0 0 1.1rem;
  font-size: .92rem;
  color: var(--cb-gri);
}

/* Form */
.cb-form{
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.cb-form-satir{
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}

@media (min-width: 640px){
  .cb-form-satir{
    grid-template-columns: 1fr 1fr;
  }

  .cb-form-satir-uc{
    grid-template-columns: repeat(3, 1fr);
  }
}

.cb-form-alan{
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: 0;
}

.cb-form-alan label{
  font-size: .85rem;
  font-weight: 600;
  color: var(--cb-murekkep);
}

.cb-zorunlu{
  color: var(--cb-vino);
}

.cb-form input[type="text"],
.cb-form input[type="email"],
.cb-form input[type="tel"],
.cb-form textarea{
  width: 100%;
  padding: .65rem .85rem;
  font: inherit;
  font-size: .95rem;
  color: var(--cb-murekkep);
  background: var(--cb-zemin);
  border: 1px solid var(--cb-cizgi);
  border-radius: var(--cb-radius-kucuk);
  transition: border-color var(--cb-gecis), box-shadow var(--cb-gecis);
}

.cb-form input:focus,
.cb-form textarea:focus{
  outline: none;
  border-color: var(--cb-vino);
  box-shadow: 0 0 0 3px rgba(154,47,81,.12);
}

.cb-form textarea{
  resize: vertical;
  min-height: 96px;
}

/* Talep türü seçimi: kartpostal / orijinal — büyük, tıklanabilir kartlar */
.cb-secim{
  margin: 0 0 .25rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.cb-secim-baslik{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .6rem;
  padding: 0;
  margin-bottom: .6rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--cb-murekkep);
}

.cb-secim-ipucu{
  font-weight: 400;
  color: var(--cb-gri);
}

.cb-secim-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

@media (min-width: 640px){
  .cb-secim-grid{
    grid-template-columns: 1fr 1fr;
  }
}

.cb-secim-kart{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "ikon metin isaret"
    "adet adet adet";
  align-items: center;
  gap: .35rem .85rem;
  padding: .9rem 1rem;
  background: var(--cb-zemin);
  border: 1.5px solid var(--cb-cizgi);
  border-radius: var(--cb-radius);
  cursor: pointer;
  transition: border-color var(--cb-gecis), box-shadow var(--cb-gecis), background var(--cb-gecis);
}

.cb-secim-kart:hover{
  border-color: #cfc8c0;
  box-shadow: var(--cb-golge);
}

/* Gerçek checkbox görünmez ama erişilebilir kalır. */
.cb-secim-kart > input{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cb-secim-ikon{
  grid-area: ikon;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cb-yumusak);
  color: var(--cb-gri);
  transition: background var(--cb-gecis), color var(--cb-gecis);
}

.cb-secim-metin{
  grid-area: metin;
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}

.cb-secim-ad{
  font-weight: 700;
  font-size: 1rem;
  color: var(--cb-murekkep);
}

.cb-secim-aciklama{
  font-size: .82rem;
  color: var(--cb-gri);
  line-height: 1.35;
}

.cb-secim-isaret{
  grid-area: isaret;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--cb-cizgi);
  background: var(--cb-zemin);
  transition: border-color var(--cb-gecis), background var(--cb-gecis);
  position: relative;
}

.cb-secim-isaret::after{
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--cb-gecis);
}

/* Seçili durum: :has destekleyen tarayıcılarda saf CSS; diğerlerinde JS'in eklediği .cb-secili. */
.cb-secim-kart:has(input:checked),
.cb-secim-kart.cb-secili{
  border-color: var(--cb-vino);
  background: #fdf7f9;
  box-shadow: 0 0 0 3px rgba(154,47,81,.10);
}

.cb-secim-kart:has(input:checked) .cb-secim-ikon,
.cb-secim-kart.cb-secili .cb-secim-ikon{
  background: var(--cb-vino);
  color: #fff;
}

.cb-secim-kart:has(input:checked) .cb-secim-isaret,
.cb-secim-kart.cb-secili .cb-secim-isaret{
  border-color: var(--cb-vino);
  background: var(--cb-vino);
}

.cb-secim-kart:has(input:checked) .cb-secim-isaret::after,
.cb-secim-kart.cb-secili .cb-secim-isaret::after{
  transform: rotate(45deg) scale(1);
}

.cb-secim-kart:has(input:focus-visible),
.cb-secim-kart.cb-odak{
  outline: 2px solid var(--cb-vino);
  outline-offset: 2px;
}

/* Kartpostal adedi: yalnız kart seçiliyken açılır. */
.cb-secim-adet{
  grid-area: adet;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .45rem;
  padding-top: .7rem;
  border-top: 1px dashed var(--cb-cizgi);
  font-size: .85rem;
  color: var(--cb-gri);
}

.cb-secim-kart:has(input:checked) .cb-secim-adet,
.cb-secim-kart.cb-secili .cb-secim-adet{
  display: flex;
}

.cb-adet{
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--cb-cizgi);
  border-radius: 999px;
  background: var(--cb-zemin);
  overflow: hidden;
}

.cb-adet-btn{
  width: 34px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.05rem;
  color: var(--cb-vino);
  cursor: pointer;
}

.cb-adet-btn:hover{
  background: var(--cb-yumusak);
}

.cb-form .cb-adet input[type="number"]{
  width: 3rem;
  padding: .35rem 0;
  text-align: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 600;
  -moz-appearance: textfield;
}

.cb-adet input::-webkit-outer-spin-button,
.cb-adet input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.cb-form .cb-adet input:focus{
  box-shadow: none;
  outline: none;
}

.cb-rozet-koleksiyon{
  background: var(--cb-vino);
  border-color: var(--cb-vino);
  color: #fff;
}

.cb-eser-koleksiyon-not{
  margin: .25rem 0 1rem;
  padding: .75rem .9rem;
  font-size: .92rem;
  color: var(--cb-murekkep);
  background: var(--cb-yumusak);
  border-left: 3px solid var(--cb-vino);
  border-radius: 0 var(--cb-radius-kucuk) var(--cb-radius-kucuk) 0;
}

/* Satışa kapalı seçenek: soluk, tıklanmaz, işaret yerine kilit hissi */
.cb-secim-kart.cb-kapali{
  cursor: not-allowed;
  background: var(--cb-yumusak);
  border-style: dashed;
  box-shadow: none;
}

.cb-secim-kart.cb-kapali:hover{
  border-color: var(--cb-cizgi);
  box-shadow: none;
}

.cb-secim-kart.cb-kapali .cb-secim-ikon,
.cb-secim-kart.cb-kapali .cb-secim-ad,
.cb-secim-kart.cb-kapali .cb-secim-aciklama{
  opacity: .6;
}

.cb-secim-kart.cb-kapali .cb-secim-isaret{
  visibility: hidden;
}

.cb-secim-etiket{
  display: inline-block;
  vertical-align: middle;
  margin-left: .35rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  background: var(--cb-vino);
  opacity: 1 !important;
}

.cb-secim-uyari{
  margin: .6rem 0 0;
  font-size: .85rem;
  color: #9A2F2F;
}

.cb-secim.cb-hatali .cb-secim-kart{
  border-color: #d9a1a1;
}

.cb-form-gonder{
  align-self: flex-start;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.cb-form-alt{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: .25rem;
}

.cb-form-kvkk{
  margin: 0;
  font-size: .78rem;
  color: var(--cb-gri);
  max-width: 32rem;
}

/* Honeypot: ekran dışına taşınır (display:none botlara ipucu olur) */
.cb-form-gizli{
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

/* Bildirim kutuları */
.cb-bildirim{
  padding: .85rem 1.1rem;
  border-radius: var(--cb-radius-kucuk);
  font-size: .92rem;
  font-weight: 500;
  margin-bottom: 1.1rem;
  border: 1px solid transparent;
}

.cb-bildirim-ok{
  background: #F3F6E7;
  border-color: var(--cb-fistik);
  color: #4A5222;
}

.cb-bildirim-hata{
  background: #FBEFF2;
  border-color: var(--cb-vino);
  color: var(--cb-vino-koyu);
}

.cb-bildirim-notr{
  background: var(--cb-zemin);
  border-color: var(--cb-cizgi);
  color: var(--cb-gri);
  margin-bottom: .9rem;
}

/* Tekil altındaki "başka eserler" bölümü nefes alsın */
.cb-bolum-diger-eserler{
  margin-top: 2.5rem;
  border-top: 1px solid var(--cb-cizgi);
}

/* =========================================================================
   16. FOOTER
   ========================================================================= */
.cb-footer{
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
  padding: clamp(1.75rem, 5vw, 2.75rem) 0;
  border-top: 1px solid var(--cb-cizgi);
  background: var(--cb-yumusak);
}

.cb-footer > *,
.cb-footer-ic{
  width: min(100% - 3rem, var(--cb-kap-genislik));
  margin-inline: auto;
}

.cb-footer-ic{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.cb-footer p{
  margin: 0;
  font-size: .9rem;
  color: var(--cb-gri);
}

.cb-footer a{
  color: var(--cb-murekkep);
  font-weight: 500;
  text-decoration: none;
}

.cb-footer a:hover{
  color: var(--cb-vino);
}

.cb-footer-sosyal a{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.cb-footer-sosyal,
.cb-footer nav ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  margin: 0;
  padding: 0;
  font-size: .92rem;
}

/* =========================================================================
   17. GENİŞ EKRAN İNCE AYARLARI
   (kırılımlar: 640px / 900px / 1200px — mobile-first)
   ========================================================================= */
@media (min-width: 900px){
  body{
    font-size: 1.02rem;
  }
}

@media (min-width: 1200px){
  .cb-defter-grid{
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 2rem;
  }
}

/* =========================================================================
   18. PREFERS-REDUCED-MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .cb-hero-slayt{ transition: none; }
  html{
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .cb-kart:hover,
  .cb-defter-kapak:hover img,
  .cb-marker:hover .cb-marker-cerceve{
    transform: none;
  }

  .cb-kart:hover .cb-kart-gorsel img{
    transform: none;
  }
}