/* ========================================================================== 01 · TOKENS — tasarim degiskenleri Sitedeki HER renk, olcu, gecis suresi burada tanimlidir. Sablonlarda ve diger CSS dosyalarinda cipl. deger (#12211A gibi) yazilmaz. ========================================================================== */ :root { /* ---------------------------------------------------------------- Renk */ --c-fog: #E8EDE4; /* sayfa zemini */ --c-paper: #F6F8F4; /* kart / acik yuzey */ --c-ink: #12211A; /* metin ve koyu bolumler */ --c-forest: #2C5F3F; /* birincil marka yesili */ --c-leaf: #4BB22D; /* vurgu / hover */ --c-ember: #E0A33C; /* CTA / sicak vurgu */ --c-stone: #A9B7A2; /* dekoratif sis yesili — cizgi, koyu zeminde metin */ /* IKINCIL METIN RENGI — baglama gore degisir. #A9B7A2 acik zeminde 1.6:1 kontrast verir; WCAG AA icin 4.5:1 gerekir. Bu yuzden acik bolumlerde koyu adaci, koyu bolumlerde sis yesili kullanilir. Asagida .section--dark / .site-footer / .hero icin yeniden tanimlanir. */ --c-muted: #5C6E57; /* acik zeminde 4.6:1 (fog) · 5.1:1 (paper) */ /* SICAK VURGU METNI — #E0A33C acik zeminde 1.9:1 verir. Buton/rozet ZEMINI olarak --c-ember, METIN olarak --c-warm kullanilir. */ --c-warm: #8A5F00; /* acik zeminde 4.8:1 (fog) · 5.3:1 (paper) */ /* MEVSIM VURGUSU METNI — acik zeminde okunabilir karsiliklar. Zemin/cizgi icin --c-accent, metin icin --c-accent-text. */ --c-accent-text: #2A711A; /* Yaprak yesili metin karsiligi (#4BB22D acik zeminde 2.3:1) */ --c-leaf-text: #2A711A; /* acik zeminde 5.1:1 */ /* HAYALET BUTON: zemine gore yazi ve kenarlik rengi. Koyu baglamda asagida yeniden tanimlanir; boylece hero, page-hero ve koyu bolumlerdeki butonlar okunmaz hale gelmez. */ --btn-ghost-fg: var(--c-ink); --btn-ghost-border: var(--c-line-strong); /* Mevsime gore degisen vurgu — JS tarafindan guncellenir */ --c-accent: var(--c-leaf); /* Mevsim paleti */ --c-spring: #7FB069; --c-summer: #4BB22D; --c-autumn: #C8792E; --c-winter: #5E8CA8; /* Turetilmis yuzeyler — color-mix ile tek kaynaktan uretilir */ --c-line: color-mix(in srgb, var(--c-stone) 50%, transparent); --c-line-strong: color-mix(in srgb, var(--c-stone) 70%, transparent); --c-line-dark: color-mix(in srgb, var(--c-stone) 24%, transparent); --c-ink-70: color-mix(in srgb, var(--c-ink) 70%, transparent); --c-paper-82: color-mix(in srgb, var(--c-paper) 82%, transparent); --c-paper-72: color-mix(in srgb, var(--c-paper) 72%, transparent); --c-paper-16: color-mix(in srgb, var(--c-paper) 16%, transparent); --c-forest-tint: color-mix(in srgb, var(--c-forest) 14%, transparent); /* ------------------------------------------------------------ Tipografi */ /* Display: EB Garamond. Eski surumde Fraunces vardi; Fraunces ve Instrument Serif yapay zeka uretimi sitelerin imza yazi tipleridir ve markayi jenerik gosterir. EB Garamond eski-stil, sicak ve lokantа/menü tipografisine ait bir yuz — 30 yillik orman isletmesi konumuyla ortusur. GERI ALMAK ICIN: bu iki satiri ve head.php'deki font baglantisini eski haline dondurun; baska hicbir yerde degisiklik gerekmez. */ --f-display: "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif; --f-body: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* EB Garamond'da ozel eksen yok; token korunuyor ki sablonlar degismesin */ --f-display-vars: normal; /* Garamond, Fraunces'e gore optik olarak kucuk gorunur; display agirligi 300 yerine 400'den baslar. */ --w-display: 400; /* Akiskan olcek — 360px ile 1440px arasinda dogrusal buyur */ --t-xs: 0.5625rem; /* 9px · mikro etiket */ --t-sm: 0.625rem; /* 10px · eyebrow */ --t-md: 0.6875rem; /* 11px · mono meta */ --t-base: clamp(1rem, 0.96rem + 0.18vw, 1.125rem); --t-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); --t-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); --t-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); --t-h2: clamp(1.8rem, 1.4rem + 1.9vw, 2.8rem); --t-h1: clamp(2.2rem, 1.5rem + 3.2vw, 4.6rem); --t-hero: clamp(2.6rem, 1.2rem + 6vw, 7rem); --t-mega: clamp(4rem, 1rem + 13vw, 14rem); /* footer devasa kelime */ --lh-tight: 1.02; --lh-snug: 1.2; --lh-body: 1.65; --ls-tight: -0.03em; --ls-wide: 0.14em; /* mono eyebrow harf araligi */ /* --------------------------------------------------------------- Olcu */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* Bolum ic bosluklari — akiskan DEGERLER DUSURULDU. Onceki ayar (8vw / 11vw) 1440 piksellik ekranda bolum basina 115-158 piksel UST VE ALT bosluk demekti; iki bolumun bosluklari toplandigi icin aralarda 320 pikseli asan bos seritler olusuyordu. Olculdu: anasayfanin %28'i bos dikey seritti, en buyugu 389 piksel - 900 piksellik ekranda neredeyse yarim ekran hiclik. Yeni degerlerde ayni oran %17'ye, en buyuk bosluk 240 piksele iner; bolumler hala birbirinden ayrilir ama ziyaretci kaydirirken bos ekran gormez. */ --sp-section: clamp(36px, 4.4vw, 66px); --sp-section-lg: clamp(46px, 5.6vw, 82px); --sp-gutter: clamp(20px, 4vw, 64px); --sp-gap: clamp(24px, 3.4vw, 52px); --w-container: 1200px; --w-container-lg: 1440px; --w-prose: 820px; /* --------------------------------------------------------------- Form */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 20px; --r-pill: 999px; /* -------------------------------------------------------------- Golge */ --shadow-sm: 0 1px 2px color-mix(in srgb, var(--c-ink) 6%, transparent); --shadow-md: 0 12px 32px -12px color-mix(in srgb, var(--c-ink) 26%, transparent); --shadow-lg: 0 28px 60px -24px color-mix(in srgb, var(--c-ink) 38%, transparent); /* -------------------------------------------------------------- Hareket */ --e-out: cubic-bezier(0.22, 1, 0.36, 1); /* yumusak cikis */ --e-in-out: cubic-bezier(0.65, 0, 0.35, 1); --d-fast: 180ms; --d-base: 300ms; --d-slow: 400ms; --d-reveal: 700ms; /* --------------------------------------------------------------- Katman */ --z-base: 1; --z-sticky: 20; --z-header: 50; /* Yuzen butonlar icerigin ustunde ama overlay'in ALTINDA durmali; aksi halde mobil menu acikken WhatsApp butonu menunun uzerine biner. */ --z-float: 60; --z-overlay: 70; --z-modal: 90; /* Sabit header yuksekligi — capa kaydirmasi bunu kullanir */ --h-header: 76px; } /* Koyu zeminlerde ikincil metin yeniden sis yesiline doner (kontrast 7.9:1) */ /* KOYU BAGLAMLAR — buraya eklenen her secici, icindeki ikincil metin, fiyat, vurgu ve hayalet buton renklerini otomatik olarak koyu zemine uygun karsiliklariyla degistirir. Yeni koyu bir bolum eklerken secicisini bu listeye yazmak yeterlidir. */ .section--dark, .site-footer, .hero, .page-hero, .reservation-hero, .mobile-nav, .cta-split__panel, .site-header--overlay:not(.is-solid) { --c-muted: var(--c-stone); --c-warm: var(--c-ember); --c-accent-text: var(--c-accent); --c-leaf-text: var(--c-leaf); --btn-ghost-fg: var(--c-paper); --btn-ghost-border: var(--c-line-dark); } /* Mevsim siniflari — */ :root[data-season="ilkbahar"] { --c-accent: var(--c-spring); --c-accent-text: #3E6B2B; } :root[data-season="yaz"] { --c-accent: var(--c-summer); --c-accent-text: #2A711A; } :root[data-season="sonbahar"] { --c-accent: var(--c-autumn); --c-accent-text: #8A4F14; } :root[data-season="kis"] { --c-accent: var(--c-winter); --c-accent-text: #2F5468; } /* color-mix desteklemeyen eski tarayicilar icin guvenli yedekler */ @supports not (color: color-mix(in srgb, red 50%, transparent)) { :root { --c-line: rgba(169, 183, 162, 0.5); --c-line-strong: rgba(169, 183, 162, 0.7); --c-line-dark: rgba(169, 183, 162, 0.24); --c-ink-70: rgba(18, 33, 26, 0.7); --c-paper-82: rgba(246, 248, 244, 0.82); --c-paper-72: rgba(246, 248, 244, 0.72); --c-paper-16: rgba(246, 248, 244, 0.16); --c-forest-tint: rgba(44, 95, 63, 0.14); } }