/* GENERATED by fetch-fonts.mjs. Do not edit — re-run the script. */ @font-face { font-family: 'Cormorant Garamond'; src: url(fonts/cormorantg-400-latin-ext.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; src: url(fonts/cormorantg-400-latin.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; src: url(fonts/cormorantg-500-latin-ext.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; src: url(fonts/cormorantg-500-latin.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; src: url(fonts/cormorantg-600-latin-ext.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; src: url(fonts/cormorantg-600-latin.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; src: url(fonts/cormorantg-400i-latin-ext.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; src: url(fonts/cormorantg-400i-latin.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; src: url(fonts/cormorantg-500i-latin-ext.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; src: url(fonts/cormorantg-500i-latin.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'EB Garamond'; src: url(fonts/ebgaramond-400-latin-ext.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'EB Garamond'; src: url(fonts/ebgaramond-400-latin.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'EB Garamond'; src: url(fonts/ebgaramond-400i-latin-ext.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'EB Garamond'; src: url(fonts/ebgaramond-400i-latin.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'EB Garamond'; src: url(fonts/ebgaramond-600-latin-ext.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'EB Garamond'; src: url(fonts/ebgaramond-600-latin.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'EB Garamond'; src: url(fonts/ebgaramond-600i-latin-ext.woff2) format('woff2'); font-weight: 600; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'EB Garamond'; src: url(fonts/ebgaramond-600i-latin.woff2) format('woff2'); font-weight: 600; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Open Sans'; src: url(fonts/opensans-400-latin-ext.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Open Sans'; src: url(fonts/opensans-400-latin.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Open Sans'; src: url(fonts/opensans-600-latin-ext.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Open Sans'; src: url(fonts/opensans-600-latin.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Homemade Apple'; src: url(fonts/homemade-400-latin.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant'; src: url(fonts/cormorant-300-latin-ext.woff2) format('woff2'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant'; src: url(fonts/cormorant-300-latin.woff2) format('woff2'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Special Elite'; src: url(fonts/specialelite-400-latin-ext.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Special Elite'; src: url(fonts/specialelite-400-latin.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* EVERY NUMERAL IN EB GARAMOND (src/typefaces.mjs, web 12, 2026-09-24). Cormorant's figures are old-style — 13 and 21:00 bob up and down — and the client chose EB Garamond for numbers everywhere, headings included. These faces join the Cormorant family for the ten digits only; a face declared later is tried first for the characters it covers, so this file is loaded AFTER fonts.css and every digit set in Cormorant is drawn by EB Garamond, whose default figures are lining. The ₺ sign stays Cormorant's: EB Garamond's is far heavier than the digits it stands beside. EB Garamond ships at 400 only here, so every Cormorant weight borrows it. */ @font-face { font-family: 'Cormorant Garamond'; src: url(fonts/ebgaramond-400-latin.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0030-0039; } @font-face { font-family: 'Cormorant Garamond'; src: url(fonts/ebgaramond-400-latin.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0030-0039; } @font-face { font-family: 'Cormorant Garamond'; src: url(fonts/ebgaramond-400-latin.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0030-0039; } @font-face { font-family: 'Cormorant Garamond'; src: url(fonts/ebgaramond-400i-latin.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0030-0039; } @font-face { font-family: 'Cormorant Garamond'; src: url(fonts/ebgaramond-400i-latin.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; unicode-range: U+0030-0039; } /* Athenaum — the design system in brand/DESIGN-SYSTEM.md, and nothing else. Tokens are the 30.08.2026 designer delivery (19 approved HTML drafts), which supersedes the brand-book-only extraction of 2026-08-24 wherever the two disagree. There is no #ffffff and no #000000 anywhere in this file, on purpose: neither source has one. */ :root { /* ── grounds ──────────────────────────────────────────────────────────── Light-on-dark is the house default. --cream-light is the ONLY light section ground and never carries type; --cream is for paper OBJECTS (calendar leaf, invitation, cards) and is the ink on every dark ground. */ --navy: #011727; /* Gece Laciverti — the primary dark ground */ --cream-light:#FAF7F0; /* the only light section ground; BG-only */ --cream: #F3EDE2; /* paper objects, and type on dark */ --bordo: #4A1B2F; /* Derin Bordo — 'Meclisten sesler', Hakkında */ --bordo-salon:#2E1020; /* the Salon page only, nowhere else */ /* ── gold, split three ways by JOB; these are not interchangeable ──────── */ --gold: #C5AA6F; /* gold as INK — menu, accents, headings on dark */ --gold-line: #C5AA6F; /* gold as LINE and FILL — section rule, frames, and the one filled sales button per page */ --gold-label: #86661C; /* gold as LABEL on light grounds — the darker step that actually clears contrast on --cream-light */ /* ── ink. The muted tone is GROUND-DEPENDENT — this is load-bearing. ───── */ --ink: var(--bordo); /* primary ink on light grounds */ --ink-muted: #7C6853; /* muted ink on LIGHT grounds (taupe) */ --ink-on-dark: var(--cream); /* primary ink on dark grounds */ --ink-muted-dark: #9FB0C2; /* muted ink on NAVY grounds */ --smoke: #554E4E; /* Dumanlı Siyah — text only */ /* ── lines ────────────────────────────────────────────────────────────── Every section transition carries a 1px --gold-line rule. */ --paper-edge: #C9B99C; /* the hairline edge of paper objects */ --navy-line: #1E3040; /* hairlines ON navy grounds */ --measure: 68ch; --rule: 1px solid var(--gold-line); /* Retired 2026-09-02, kept so nothing breaks mid-rebuild. Do not use. --ground #E5E4E3 → --cream-light · --taupe #796956 → --ink-muted --gold-bright → --gold-line · --bordo-deep #2D0D27 → --bordo/--bordo-salon */ --taupe: var(--ink-muted); --ground: var(--cream-light); --gold-bright: var(--gold-line); --bordo-deep: var(--bordo); } /* @font-face lives in fonts/fonts.css, GENERATED by fetch-fonts.mjs and concatenated ahead of this file at build time. It is generated because the unicode-ranges must match Google's exactly: `latin-ext` alone has no a-z and no dotless i, so a hand-written single-subset block renders one Turkish word in two fonts. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--cream); color: var(--ink); font: 400 1.0625rem/1.7 'EB Garamond', Georgia, serif; -webkit-font-smoothing: antialiased; } .wrap { width: min(100% - 2.5rem, 62rem); margin-inline: auto; } a { color: var(--bordo); text-underline-offset: 0.2em; text-decoration-thickness: 1px; } a:hover { color: var(--gold-bright); } .skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; position: fixed; z-index: 100; background: var(--bordo); color: var(--cream); padding: .6rem 1rem; } /* ── the label voice: Open Sans, small, tracked, never a heading ─────────── */ .label { font: 600 .6875rem/1.4 'Open Sans', system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); } /* ── header ─────────────────────────────────────────────────────────────── */ .site-head { border-bottom: var(--rule); } .site-head .wrap { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 0; } .site-head img { width: 46px; height: 46px; display: block; } .wordmark { font: 400 1.5rem/1 'Cormorant Garamond', Garamond, serif; letter-spacing: .22em; text-transform: uppercase; color: var(--bordo); text-decoration: none; } .site-head nav { margin-left: auto; display: flex; gap: 1.5rem; } .site-head nav a { font: 400 .95rem/1 'Open Sans', system-ui, sans-serif; text-decoration: none; color: var(--smoke); } .site-head nav a:hover { color: var(--bordo); } /* ── book hero ──────────────────────────────────────────────────────────── */ .book-hero { padding: 3.5rem 0 2.5rem; } .book-hero .month { margin: 0 0 1rem; } .book-hero h1 { font: 400 clamp(3rem, 9vw, 6rem)/0.95 'Cormorant Garamond', Garamond, serif; margin: 0 0 .5rem; color: var(--bordo); letter-spacing: .01em; } .book-hero .author { font: italic 400 1.5rem/1.3 'EB Garamond', Georgia, serif; color: var(--taupe); margin: 0 0 1.75rem; } .book-hero .lede { font-size: 1.25rem; max-width: var(--measure); margin: 0 0 2rem; } .artwork { width: 100%; height: auto; display: block; border: var(--rule); } /* ── the catalogue card ─────────────────────────────────────────────────── */ .kunye { margin: 3rem 0; border-top: 2px solid var(--bordo); padding-top: 1.25rem; } .kunye h2 { margin: 0 0 1.25rem; } .kunye dl { margin: 0; display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; } .kunye dt { font: 600 .6875rem/1.6 'Open Sans', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); padding: .85rem 0; border-top: var(--rule); } .kunye dd { margin: 0; padding: .8rem 0; border-top: var(--rule); font-size: 1.0625rem; } .kunye dd a { word-break: break-word; } /* ── sections ───────────────────────────────────────────────────────────── */ section { padding: 2.5rem 0; } h2 { font: 400 2rem/1.2 'Cormorant Garamond', Garamond, serif; color: var(--bordo); margin: 0 0 1rem; } h3 { font: 600 1.15rem/1.3 'Cormorant Garamond', Garamond, serif; color: var(--bordo-deep); margin: 0 0 .35rem; letter-spacing: .02em; } .program { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .program article { border: var(--rule); padding: 1.4rem; background: color-mix(in srgb, var(--cream) 55%, var(--ground)); } .program p { margin: .4rem 0 0; color: var(--smoke); } .program .meeting { margin-top: .9rem; } /* A dark ground is the house default, not an accent — the brand book's applied pieces live on burgundy with cream type. */ .panel { background: var(--bordo); color: var(--cream); } .panel h2 { color: var(--cream); } .panel .label { color: var(--gold); } /* :not(.btn) is load-bearing. `.panel a` is specificity (0,1,1) and `.btn-primary` is (0,1,0), so without it the gold link colour wins over the button's own ink and the CTA renders gold-on-gold — a button-shaped hole. */ .panel a:not(.btn) { color: var(--gold); } .panel .wrap { padding: 3rem 0; } .panel p { max-width: var(--measure); } .prices { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 1.75rem 0 1.25rem; } .price .amount { font: 400 2.75rem/1 'Cormorant Garamond', Garamond, serif; color: var(--gold); display: block; } .price .per { color: color-mix(in srgb, var(--cream) 75%, transparent); font-size: .95rem; } .features { list-style: none; padding: 0; margin: 1.5rem 0 0; max-width: var(--measure); } .features li { padding: .5rem 0 .5rem 1.6rem; position: relative; border-top: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); } .features li::before { content: '·'; position: absolute; left: .4rem; color: var(--gold); font-size: 1.4rem; line-height: 1.2; } .btn { display: inline-block; font: 600 .8125rem/1 'Open Sans', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 1rem 1.9rem; border: 1px solid var(--gold); } .btn-primary { background: var(--gold); color: var(--bordo-deep); } .btn-primary:hover { background: var(--gold-bright); color: var(--bordo-deep); } .btn-ghost { color: var(--bordo); border-color: var(--bordo); background: transparent; } .btn-ghost:hover { background: var(--bordo); color: var(--cream); } /* ── footer ─────────────────────────────────────────────────────────────── */ .site-foot { border-top: var(--rule); padding: 2.5rem 0 3.5rem; color: var(--smoke); font-size: .95rem; } @media (max-width: 46rem) { .kunye dl { grid-template-columns: 1fr; } .kunye dt { border-top: var(--rule); padding-bottom: 0; } .kunye dd { border-top: none; padding-top: .15rem; } /* The nav used to be `display: none` here, which removed PROGRAM, TAKVİM, KÜTÜPHANE and GİRİŞ from every inner page on a phone — no way to sign in or to reach the membership from the one device most of her readers use. It wraps onto its own row instead. */ .site-head .wrap { flex-wrap: wrap; row-gap: .75rem; } .site-head nav { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; width: 100%; order: 3; } .site-head nav a { font-size: .62rem; min-height: 44px; display: inline-flex; align-items: center; } } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Rating and card actions. Both live inside a `when(...)` guard, so these rules style something that is either fully present or entirely absent — there is no empty state to design because an unset field emits no markup at all. */ .book-hero .rating { display: flex; align-items: baseline; gap: .6rem; margin: -1.25rem 0 1.75rem; } .book-hero .stars { color: var(--gold); font-size: 1.15rem; letter-spacing: .1em; } .book-hero .score { font: 600 .75rem/1 'Open Sans', system-ui, sans-serif; letter-spacing: .12em; color: var(--taupe); } .card-actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .75rem; } /* ── the hero ─────────────────────────────────────────────────────────────── The video is decorative: it carries no information the copy does not, so it is aria-hidden and untabbable. The copy is real DOM, which is what a screen reader and a JS-blocked visitor get. `width: 100%` is not redundant next to `aspect-ratio`. With a max-height in play the browser resolves the WIDTH from the ratio instead — a 1440px viewport rendered a 1248px hero pinned to the left edge, with a cream gutter down the right. That is what "the video is not centred" was. */ .hero { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: min(80vh, 46rem); overflow: hidden; background: var(--bordo-deep); } /* `center 66%` lifts the mask clear of the band. The source is 16:9 and the box is wider than that, so `cover` crops top and bottom; a higher Y shows more of the source's lower half, which raises everything in the frame. */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 66%; } /* THE ARCHITRAVE. A temple carries its inscription on a solid band across the columns, and that is exactly what this type needs: sampled across the loop, every region of the video swings 80→250 in luminance, so nothing fixed stays legible on the image itself. At 92% the composite never falls below ~218 against burgundy at ~43 — and the artwork still ghosts through, like light through marble. The gold fillet is the moulding that separates architrave from frieze; it is one pixel because that is all it is on a building. */ /* Pinned to the bottom rather than aligned there. A grid `align-items: end` left a 40px strip of video below the band — a sliver that reads as a mistake in a composition whose whole argument is that the band is structural. */ .architrave { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--cream) 92%, transparent); border-top: 1px solid var(--gold); padding: 2rem 0 1.75rem; box-shadow: 0 -18px 40px rgb(45 13 39 / .18); } /* Two courses of inscription with the mark between them, which is how a band this wide actually sets. Left to wrap on its own it broke after "VE" and the rosette landed mid-phrase — the separator has to fall where the meaning does. */ .architrave h1 { font: 400 clamp(1.6rem, 3.1vw, 2.75rem)/1.12 'Cormorant Garamond', Garamond, serif; text-transform: uppercase; letter-spacing: .085em; color: var(--bordo); margin: 0 0 .6rem; text-align: center; } .architrave h1 span { display: block; } /* The word-separator from their own badge, where the ring reads ATHENAUM · ATHENAUM. Decorative, so it is not read aloud. */ .rosette { color: var(--gold); font-size: .42em; line-height: 1.6; letter-spacing: 0; } .architrave .sub { font: italic 400 1.0625rem/1.5 'EB Garamond', Georgia, serif; color: var(--taupe); margin: 0 0 1.5rem; text-align: center; } .hero-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin: 0; } /* Someone who asked for less motion gets the poster frame and no download. */ @media (prefers-reduced-motion: reduce) { .hero-video { display: none; } .hero { background: var(--bordo-deep) center 42%/cover url(assets/hero-renkli-poster.jpg); } } /* Narrow: the band needs more of the frame to stay readable at one line per phrase, and the video needs to stay tall enough to still be a picture. */ @media (max-width: 46rem) { .hero { aspect-ratio: 4 / 5; max-height: 78vh; } .architrave { padding: 1.75rem 0 1.5rem; } .rosette { display: block; margin: .15em auto; font-size: .8rem; } } /* ── the writing archive ────────────────────────────────────────────────── */ .posts { border-top: 2px solid var(--bordo); padding-top: 0; } .post { padding: 1.4rem 0; border-bottom: var(--rule); } .post h3 { margin: .25rem 0 .3rem; font-size: 1.3rem; } .post h3 a { text-decoration: none; } .post h3 a:hover { text-decoration: underline; } .post .sub { margin: 0; color: var(--smoke); } /* A locked post in the archive reads as an invitation, not an error: the gold keyline is the same device the membership panel uses, so the two are visibly the same offer. Nothing here is hidden or greyed out — the listing is meant to be read and wanted. */ .post.is-locked { padding-left: 1rem; border-left: 2px solid var(--gold); } .post.is-locked .label { color: var(--gold-bright); } .locked { margin: 2.5rem 0 0; padding: 2.25rem 2rem; max-width: var(--measure); background: color-mix(in srgb, var(--gold) 9%, transparent); border: var(--rule); } .locked p { margin: 0 0 .9rem; color: var(--smoke); } .locked p:last-child { margin-bottom: 0; } .locked .label { color: var(--bordo); } .locked-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } /* One published post's body — `markdown()` in markdown.mjs is the only producer of this markup, so these are the only tags it needs to style. Her images arrive at their original size (up to 1456px): they must never be wider than the column, least of all on a phone. */ .prose { max-width: var(--measure); margin: 2rem 0; } .prose h2 { font: 600 1.5rem/1.3 'Cormorant Garamond', Georgia, serif; margin: 2rem 0 .75rem; } .prose h3 { font: 600 1.2rem/1.3 'Cormorant Garamond', Georgia, serif; margin: 1.75rem 0 .6rem; } .prose p { margin: 0 0 1.25rem; } .prose strong { color: var(--bordo-deep); } .prose em { color: var(--taupe); } .prose a { text-underline-offset: 0.2em; overflow-wrap: anywhere; } .prose figure { margin: 1.5rem 0; } .prose figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; } .prose figcaption { margin-top: .5rem; font-size: .9rem; color: var(--ink-muted); } .prose blockquote { margin: 0 0 1.25rem; padding: .1rem 0 .1rem 1.1rem; border-left: 2px solid var(--gold-line); color: var(--smoke); } .prose blockquote p { margin: 0; } .prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.4rem; } .prose li { margin: 0 0 .4rem; } .prose hr { border: 0; border-top: var(--rule); margin: 2rem 0; } /* The legal texts' party and data tables. A wide one scrolls inside the column rather than pushing a phone's page sideways. */ .prose .table-wrap { overflow-x: auto; margin: 0 0 1.25rem; } .prose table { border-collapse: collapse; width: 100%; font-size: .95rem; } .prose th, .prose td { border: 1px solid var(--gold-line); padding: .45rem .6rem; text-align: left; vertical-align: top; } .prose th { font-weight: 600; } .prose.legal h2 { font-size: 1.3rem; } .legal-list { list-style: none; padding: 0; margin: 0 0 2rem; max-width: var(--measure); } .legal-list li { border-bottom: var(--rule); } .legal-list a { display: block; padding: .75rem 0; text-decoration: none; } /* Her Substack buttons ("Kitabı Satın Alın", "Üye Ol"). Labels run long in capitals ("Üyelik Seçenekleri (Aylık ve Yıllık)"), so they wrap on a phone. */ .prose .post-cta, .post-recording { margin: 1.5rem 0; } .prose .post-cta .btn { max-width: 100%; line-height: 1.4; text-align: center; } /* ── forms ────────────────────────────────────────────────────────────────── Controls inherit the page's type rather than the browser's. Focus is a gold ring on a burgundy border — visible without being a system-blue rectangle dropped into a cream page. */ .field { margin: 0 0 1.25rem; } .field label { display: block; margin-bottom: .4rem; font: 600 .6875rem/1.4 'Open Sans', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); } .field .req { color: var(--gold); } .field input, .field select, .field textarea { width: 100%; padding: .8rem .9rem; font: 400 1.0625rem/1.5 'EB Garamond', Georgia, serif; color: var(--bordo-deep); background: color-mix(in srgb, var(--cream) 55%, #fff 45%); border: 1px solid color-mix(in srgb, var(--taupe) 45%, transparent); border-radius: 0; appearance: none; } .field textarea { resize: vertical; min-height: 8rem; } /* Placeholder must clear 4.5:1 like any other text a visitor has to read. Mixed toward the ink against the OPAQUE field ground rather than faded with `transparent`: a translucent placeholder composites against whatever sits behind the input, which on the navy band collapsed it to 1.08:1 — a field that looked empty. `opacity: 1` because Firefox still dims it by default. */ .field ::placeholder { color: color-mix(in srgb, var(--taupe) 78%, var(--bordo-deep)); opacity: 1; } .field select { background-image: none; cursor: pointer; } .field :is(input, select, textarea):hover { border-color: color-mix(in srgb, var(--bordo) 45%, transparent); } .field :is(input, select, textarea):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--bordo); } .field :is(input, select, textarea):disabled { opacity: .55; cursor: not-allowed; } .field :is(input, textarea):invalid:not(:placeholder-shown) { border-color: var(--bordo); } .stacked-form { max-width: 32rem; } /* The email capture is one line on a wide screen and stacks below it, because a single field beside its button reads as one action rather than as a form. */ .inline-form [data-form-fields] { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; max-width: 34rem; } .inline-form .field { flex: 1 1 18rem; margin: 0; } .inline-form button { flex: 0 0 auto; } /* Status names the state, and on failure names the recovery. `aria-live` is on the element so a screen reader hears the change without moving focus. */ .form-status { margin: 1rem 0 0; font: 400 .9375rem/1.5 'EB Garamond', Georgia, serif; } .form-status.is-pending { color: var(--taupe); } .form-status.is-done { color: var(--bordo); } .form-status.is-error { color: var(--bordo); border-left: 1px solid var(--gold); padding-left: .75rem; } /* ── the newsletter band ──────────────────────────────────────────────────── Gece Laciverti: a named brand role, and the ground of her own June artwork. A third register, so the burgundy membership panel still lands last. */ .band-navy { background: var(--navy); color: var(--cream); } .band-navy .wrap { padding: 3.25rem 0 3rem; } .band-navy .label { color: var(--gold); } .band-navy h2 { color: var(--cream); max-width: 22ch; } .band-navy .band-lede { max-width: var(--measure); margin: 0 0 1.75rem; color: color-mix(in srgb, var(--cream) 82%, transparent); } .band-navy .field label { color: color-mix(in srgb, var(--cream) 72%, transparent); } .band-navy .field input { background: color-mix(in srgb, var(--cream) 12%, transparent); color: var(--cream); border-color: color-mix(in srgb, var(--cream) 38%, transparent); } .band-navy .field ::placeholder { color: color-mix(in srgb, var(--cream) 62%, var(--navy)); } .band-navy .field input:hover { border-color: var(--gold); } .band-navy .form-status { color: color-mix(in srgb, var(--cream) 88%, transparent); } .band-navy .form-status.is-error { border-left-color: var(--gold); } /* ── contact ────────────────────────────────────────────────────────────────*/ .contact-cols { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr) 16rem; align-items: start; padding-bottom: 3rem; } .contact-aside ul { list-style: none; padding: 0; margin: .75rem 0 1.5rem; } .contact-aside li { padding: .45rem 0; border-top: var(--rule); } .contact-aside .aside-note { font-size: .9375rem; color: var(--taupe); border-top: 1px solid var(--bordo); padding-top: .9rem; } @media (max-width: 52rem) { .contact-cols { grid-template-columns: 1fr; gap: 2.25rem; } } /* ── events ───────────────────────────────────────────────────────────────── Reuses .program/.wall from the book programme and post-wall patterns — the same "here is what unlocking gets you" device, not a new component. */ .event.is-cancelled h3 { text-decoration: line-through; color: var(--taupe); } /* ── the forum, drawn in the browser ───────────────────────────────────── `forum.js` renders these after the page loads, so none of it is in the built HTML and none of it inherits anything from the static archive above. Tokens only — this is the design system's vocabulary applied to markup the designer's 30.08.2026 delivery did not contain, not a new palette. */ .forum-loading, .forum-empty { color: var(--ink-muted); font-style: italic; } .forum-tabs { display: flex; gap: 1.5rem; border-bottom: var(--rule); margin-bottom: 1rem; } .forum-tabs .tab { padding: .5rem 0; color: var(--ink-muted); text-decoration: none; font-size: .8rem; letter-spacing: .14em; } .forum-tabs .tab.on { color: var(--bordo); border-bottom: 2px solid var(--bordo); margin-bottom: -1px; } .post header, .comment header { display: flex; gap: .6rem; align-items: baseline; color: var(--ink-muted); font-size: .85rem; } .post .who, .comment .who { color: var(--bordo); font-weight: 500; } .badge, .edited { font-size: .7rem; letter-spacing: .12em; color: var(--gold-label); } .post .body, .comment .body { margin: .4rem 0; line-height: 1.55; max-width: var(--measure); } /* The comment thread. Indented rather than boxed, because a comment is a reply in a conversation and not a card in a list — the same reason replies indent again inside it. */ .comments { margin-top: 2rem; border-top: 2px solid var(--bordo); } .comments > h3 { margin: 1rem 0 .5rem; font-size: 1rem; letter-spacing: .1em; color: var(--ink-muted); } .comment { padding: .9rem 0; border-bottom: var(--rule); } .replies { margin-left: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--paper-edge); } .replies:empty { display: none; } /* Action rows read as quiet text until wanted. A delete that looks like a button invites the click it is trying to make deliberate. */ .post > footer, .comment > footer { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: .8rem; } .post > footer button, .comment > footer button, .forum-more button, .forum-editor-actions button { background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; letter-spacing: .1em; color: var(--ink-muted); border-bottom: 1px solid currentColor; cursor: pointer; } .post > footer button:hover, .comment > footer button:hover, .forum-more button:hover, .forum-editor-actions button:hover { color: var(--bordo); } .post > footer button:disabled, .comment > footer button:disabled, .forum-more button:disabled { color: var(--paper-edge); cursor: default; } .forum-more { margin: 1rem 0; } .forum-error { color: var(--bordo); font-size: .8rem; } .forum-error:empty { display: none; } .forum-editor { width: 100%; max-width: var(--measure); font: inherit; line-height: 1.55; padding: .6rem; border: var(--rule); background: var(--cream-light); color: var(--smoke); } .forum-editor-actions { display: flex; gap: 1rem; align-items: center; margin: .5rem 0 0; } /* ── the wordmark (build.mjs, withWordmark) ────────────────────────────────── The designer's drawing in place of typed caps, as a mask painted in `currentColor` — so it is cream in her navy bars and bordo in our cream header, wherever the typed word was that colour. `em`, so it takes the size each bar and footer already set for its text at every breakpoint; .82em is the height at which the drawing spans the width the typed caps did. */ .wm { /* inline-block: our header's brand link is inline, badge then word, and a block here dropped the word under the badge. */ display: inline-block; vertical-align: middle; height: .82em; aspect-ratio: 282.03 / 33.33; background: currentColor; -webkit-mask: url(assets/brand/athenaum-wordmark-cream.svg) center / contain no-repeat; mask: url(assets/brand/athenaum-wordmark-cream.svg) center / contain no-repeat; } .wordmark:has(.wm), .word:has(.wm) { letter-spacing: 0; line-height: 1; } /* ── who is reading (viewer.js) ───────────────────────────────────────────── A page carries both versions of a join prompt; picks one. Built as the guests' version, and stays that way until the platform says otherwise — so JavaScript off or the proxy down is the page as it was. */ body:not([data-viewer="member"]) .for-members { display: none !important; } body[data-viewer="member"] .for-guests { display: none !important; } /* The Mektup sign-up in the site's own footer and newsletter band (her-wiring.mjs, mektupForm): one field and its button, side by side. */ .mektup-inline { display: flex; flex-wrap: wrap; max-width: 380px; margin: .5rem 0 0; } .mektup-inline span { flex: 1; min-width: 0; display: flex; } .mektup-inline input { flex: 1; min-width: 0; padding: .7rem .8rem; font: inherit; font-size: 16.4px; border: 1px solid var(--gold); border-right: 0; background: var(--cream); color: var(--navy); } .mektup-inline b { display: flex; } .mektup-inline button { padding: .7rem 1rem; border: 1px solid var(--gold); background: var(--gold); color: var(--bordo-deep); font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .14em; cursor: pointer; } .mektup-inline .form-status { flex-basis: 100%; margin: .5rem 0 0; font-size: 15.2px; } /* A sent form hides its fields and its button (forms.js sets `hidden`). Her CSS gives those wrappers `display: flex`, which outranks the browser's own `[hidden] { display: none }`, so "Gönderiliyor…" stayed on screen beside "Teşekkürler" (2026-10-01). */ form[data-form] [hidden] { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ HER HOME PAGE, ported verbatim from the approved draft "0) Anasayfa/athenaum_anasayfa_tam-2.html" (30.08.2026, Pelin Dilara Çolak). This is HER CSS, not a reconstruction of it. Everything is scoped under #s1..#s6 exactly as she wrote it, so it cannot collide with styles.css. The objects her note said would arrive as illustrations — the bookcase, the fiş dolabı, the takvim yaprağı, the üç kâğıt — are ALREADY DRAWN HERE, by her, in CSS. They are not placeholders and must not be replaced by any. When the illustrator's PNGs land, they replace these blocks; until then this IS the design. DO NOT hand-edit to "improve" it. Re-port from her file instead. ═══════════════════════════════════════════════════════════════════════════ */ /* ── SCOPE GUARD ──────────────────────────────────────────────────────────── styles.css is written for the rest of the site and its class names collide with hers — `.hero`, `.btn`, `.field`, `.wrap`, plus bare `a`, `h2` and `section`. Those rules are not id-scoped, so where she relied on an inherited colour or on no background at all, ours painted over her design: her navy hero rendered bordo, and her cream headings rendered burgundy. This block neutralises exactly those, and only inside her sections. It has to come BEFORE her CSS so her own rules still win. Verified by diffing the selector sets, not by eye — 28 rules could reach in here. ────────────────────────────────────────────────────────────────────────── */ #s1, #s2, #s3, #s4, :is(#s5, .her-papers), #s6 { padding: 0; } #s1 :is(a, h1, h2, h3, p), #s2 :is(a, h1, h2, h3, p), #s3 :is(a, h1, h2, h3, p), #s4 :is(a, h1, h2, h3, p), :is(#s5, .her-papers) :is(a, h1, h2, h3, p), #s6 :is(a, h1, h2, h3, p) { color: inherit; } #s1 .hero, #s2 .hero, #s3 .hero, #s4 .hero, :is(#s5, .her-papers) .hero, #s6 .hero { position: static; width: auto; aspect-ratio: auto; background: none; margin: 0; /* max-height and overflow belong in this list, and their absence was a bug you could see on a phone. styles.css's superseded `.hero` carries `max-height: min(80vh, 46rem)` and `overflow: hidden` — our own stylesheet, bleeding INTO her design, which is the half of the scope guard that keeps actually shipping. Her stacked mobile hero needs 949px (a 341px text row, a 500px arch, 28px of gap, 80px of padding) and was being clamped to 658 and then CLIPPED, so the bottom 247px of the arch — the base of her arch and its gold rule — simply was not drawn. The layout box was the right size the whole time, which is why no overflow check caught it: nothing overflowed, it was cut. */ max-height: none; overflow: visible; } #s1 .wrap, #s2 .wrap, #s3 .wrap, #s4 .wrap, :is(#s5, .her-papers) .wrap, #s6 .wrap { width: auto; margin-inline: 0; } #s1 .btn, #s2 .btn, #s3 .btn, #s4 .btn, :is(#s5, .her-papers) .btn, #s6 .btn, #s1 .field, #s2 .field, #s3 .field, #s4 .field, :is(#s5, .her-papers) .field, #s6 .field { all: unset; box-sizing: border-box; } #s1 section, #s2 section, #s3 section, #s4 section, :is(#s5, .her-papers) section, #s6 section { padding: 0; } /* SCOPED: her draft sets the navy on itself. Applied globally that turns every other page navy, so it is bound to the home route's marker attribute instead. Sections that inherited the navy from body get it named explicitly below. */ body[data-home]{margin:0;background:#011727;font-family:'EB Garamond',Georgia,serif} #s3,:is(#s5, .her-papers){background:#011727} section{display:block;border-top:1px solid #C5AA6F} #s1{border-top:none} #s2{background:#FAF7F0;padding:72px 48px 80px;border-top:1px solid #C5AA6F} #s2 .head,#s2 .case{max-width:960px;margin-left:auto;margin-right:auto} #s6 .t{border-top:none} #s6 .close{border-top:1px solid #C5AA6F} #s6 .f{border-top:1px solid #C5AA6F} #s1 .page{background:#011727} #s1 .bar{height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(243,237,226,.12)} #s1 .brand{display:flex;align-items:center;gap:16px} #s1 .brand img{width:54px;height:54px;display:block} #s1 .word{font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} #s1 nav{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#C5AA6F;display:flex;gap:36px;align-items:center} #s1 nav a{color:inherit;text-decoration:none} #s1 nav a.giris{border:1px solid #C5AA6F;color:#C5AA6F;padding:9px 18px} /* ══ THE BAR THAT LEAVES AND COMES BACK ═══════════════════════════════════════ Her bar used to scroll away and never return. On a phone that left 2110px — two and a half screens of pinned animation — with not one reachable link in it, so a reader who already knows the club had to sit through the whole opening to reach GİRİŞ. Her review: "herkes ilk kez girmiyor… kaydırma özelliği gerçekten sadece aşağı doğru gidenler için olmalı." So it is fixed, and it answers the reader's direction: it gets out of the way going down, and it is there the instant they come back up. `position: fixed` rather than `sticky` because its containing block is `.page`, which is only as tall as the bar itself — a sticky bar there would stick for nothing. Taking it out of the flow also hands the opening its full height back: the stage now starts at y=0 instead of below a 132px stack of bands, which is what her "menü çok bölünme yaratıyor" was about. `--ath-scrub-lift` is measured at runtime (app.js), so the scroll hint follows this by itself. app.js writes `data-nav` on ; the three states are below. */ #s1 .bar { position: fixed; inset: 0 0 auto; z-index: 50; /* Her navy is the DEFAULT, and the transparent state below is the exception. That way round because `data-nav` is written by app.js: with no JavaScript the bar keeps a ground it can be read on, over sky or over navy, and simply never hides. A transparent default would have degraded to cream-on-sky. */ background: #011727; /* No hairline under the logo. Her rule above draws a faint one, and it read as a stray line through the logo area (revision list 2026-10-01, item 1). Every other page's bar has none either. */ border-bottom: 0; transition: transform .28s ease, background-color .28s ease; } /* `z-index: 50` is not decoration. `.ath-scrub-stage` is `position: sticky`, which creates a stacking context whatever its z-index, so the animation and this bar are siblings at level 0 — and the bar is EARLIER in the document, so at `z-index: auto` the animation paints straight over the header and swallows its taps. Any positive integer fixes it; this sits above her in-page layers (1–6) and below the skip link (100). */ /* At the top there is no plate: the stage behind it is already her navy, so the bar reads exactly as the band she approved. */ body[data-nav="top"] #s1 .bar { background: transparent; } body[data-nav="hidden"] #s1 .bar { transform: translateY(-100%); } /* Coming back up it needs a ground. By this point the arch has opened and the frame behind the bar is pale sky — her cream on that sky cannot be read. */ body[data-nav="shown"] #s1 .bar { background: #011727; } /* The phone menu. Hidden here, shown in the phone block below; the panel is absolutely positioned so opening it never changes the bar's height (and so never moves the stage under it). */ #s1 .bar .bar-menu, #s1 .bar .bar-giris { display: none; } /* `align-self: stretch` is load-bearing: in a centred flex row the
is only as tall as its 44px summary, so a panel at `top: 100%` would open INSIDE the 56px bar. Stretched, `100%` is the bar's own bottom edge. */ #s1 .bar-menu { position: relative; margin-left: auto; align-self: stretch; display: flex; align-items: center; } #s1 .bar-menu > summary { list-style: none; width: 44px; /* Fills the stretched
so the glyph centres on the BAR's midline. At a fixed 44px it sat at the top of the stretched box and the menu rode 6px above her wordmark and GİRİŞ. */ height: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #C5AA6F; } #s1 .bar-menu > summary::-webkit-details-marker { display: none; } #s1 .bar-menu .bars, #s1 .bar-menu .bars::before, #s1 .bar-menu .bars::after { display: block; width: 20px; height: 1px; background: currentColor; transition: transform .2s ease, opacity .2s ease; } #s1 .bar-menu .bars { position: relative; } #s1 .bar-menu .bars::before, #s1 .bar-menu .bars::after { content: ''; position: absolute; left: 0; } #s1 .bar-menu .bars::before { top: -6px; } #s1 .bar-menu .bars::after { top: 6px; } #s1 .bar-menu[open] .bars { background: transparent; } #s1 .bar-menu[open] .bars::before { transform: translateY(6px) rotate(45deg); } #s1 .bar-menu[open] .bars::after { transform: translateY(-6px) rotate(-45deg); } #s1 .bar-menu-panel { position: absolute; /* +1px is her bottom border: the stretched
ends at the bar's content box, so the panel would otherwise sit 1px inside the rule. */ top: calc(100% + 1px); right: 0; min-width: 200px; display: grid; padding: 6px 0; background: #011727; border: 1px solid #C5AA6F; } #s1 .bar-menu-panel a { font-family: 'Open Sans'; font-size: 14px; letter-spacing: .16em; color: #C5AA6F; text-decoration: none; padding: 0 18px; min-height: 44px; display: flex; align-items: center; } #s1 .bar-menu-panel a:hover { color: #F3EDE2; } #s1 .bar-menu-panel hr { border: 0; border-top: 1px solid rgba(197, 170, 111, .35); margin: 6px 16px; width: auto; } #s1 .bar .bar-giris { border: 1px solid #C5AA6F; color: #C5AA6F; padding: 9px 16px; text-decoration: none; font-family: 'Open Sans'; font-size: 12.8px; letter-spacing: .14em; align-items: center; } /* Reduced motion: the pin is already off (scrub.css), the page is a stack, and a bar that slides in and out of a stacked page is movement for its own sake. It stays where her design put it. BOTH selectors are needed, and the first one is why: `body[data-nav="hidden"] #s1 .bar` out-specifies a bare `#s1 .bar`, so the translate would survive into this block — and `#s1 *` at the foot of this file kills transitions with `!important`, so what survived would not slide, it would TELEPORT. A header that vanishes between frames is worse than one that never hides. */ @media (prefers-reduced-motion: reduce) { body[data-nav] #s1 .bar, #s1 .bar { position: static; transform: none; } } #s1 .hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px;padding:56px 48px 64px;min-height:520px} #s1 .quill{width:34px;height:34px;margin-bottom:22px} #s1 h1{font-size:54px;font-weight:500;line-height:1.1;color:#F3EDE2;margin:0 0 18px} #s1 .sub{font-size:19px;line-height:1.55;color:#C5AA6F;max-width:420px;margin:0 0 32px} #s1 .cta{display:inline-block;background:#C5AA6F;color:#011727;padding:14px 28px;font-family:'Open Sans';font-size:14px;letter-spacing:.14em;text-decoration:none} #s1 .link{margin-left:22px;font-family:'Open Sans';font-size:14px;letter-spacing:.14em;color:#F3EDE2;border-bottom:1px solid #C5AA6F;padding-bottom:4px;text-decoration:none} #s1 .arch{width:360px;height:500px;border:1px solid #C5AA6F;border-radius:180px 180px 0 0;margin:0 auto;overflow:hidden;position:relative} #s1 .arch img{width:100%;height:100%;object-fit:cover;display:block} #s1 .arch:after{content:'';position:absolute;left:-28px;right:-28px;bottom:-18px;height:1px;background:#C5AA6F} #s2 .head{display:flex;justify-content:space-between;align-items:baseline;max-width:960px;margin:0 auto 34px} #s2 .eyebrow{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#86661C;margin-bottom:6px} #s2 .title{font-family:'Cormorant Garamond';font-size:30px;font-weight:500} #s2 .more{font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#4A1B2F;border-bottom:1px solid #C5AA6F;padding-bottom:3px;text-decoration:none} /* ══ THE SHELF, IN HER MATERIALS ══════════════════════════════════════════════ What was here was CSS pretending to be walnut: seven divs of linear-gradient standing in for a cornice, two columns, a shelf board and a plinth, with a label on the case admitting it ("İLLÜSTRASYON BEKLENİYOR"). The illustration has arrived, so the pretending stops. THE FURNITURE IS A 9-SLICE, THE BOOKS ARE NOT. That split is the whole idea. The case — cornice, columns, shelf, plinth — never changes, so it is one `border-image` cut from her plate (prepare-art.py). The books DO change: this term has five, the next may have seven, and a shelf painted with ten of them would start lying the day the programme moved. So they stay what they already were — DOM elements built from TERM.books — and wear her materials instead of her pixels. The slice is cut where the CARVING ends, not where the recess opens: `top` where the capital's scrollwork becomes a fluted shaft, `bottom` where that shaft meets its base. Between them the column is a plain extrusion, so stretching it vertically is what a taller column actually looks like. Cut at the recess line instead and border-image repeats half a capital down its whole length. `border-image-width`'s bottom (85px) is deliberately larger than `border-width`'s (66px): the layout box ends at the shelf SURFACE, where the books stand, while the painted base moulding carries on below it and in front of them — which is where a plinth is. */ #s2 .case { max-width: 960px; margin: 0 auto; position: relative; /* `border-color` is her walnut, NOT transparent, and that is the whole fallback. border-image has been Baseline since 2015 so the property is not the risk — the IMAGE is: a 404, a dropped connection, a proxy that strips it, and the frame simply does not paint. With a transparent border what is left is 102px of nothing and five books floating on a dark strip, which is worse than the CSS woodwork this replaced. With her walnut underneath, the same failure leaves a solid wooden bookcase — plainer than hers, still a bookcase. MDN says the same thing about border-style for the same reason. Sampled from the plate: the shaft, the plinth and the cornice median. */ border: solid #6A452D; border-width: 102px 85px 66px 86px; /* The top PAINT carries 364 plate-pixels while the box stays at 102, so the turned torus lands in the corner at 1:1 instead of stretching down the column. The 104px it then paints over the content box is a HOLE in the middle of the plate, so the recess gradient below shows through it. */ border-image: url(assets/shelf/frame.webp) 364 150 150 152 / 206.2px 85px 85px 86px stretch; /* Her recess, measured off the plate above the books: rgb(38,27,18), flat to std 4.7 — so CSS reproduces it exactly and no tile ships for it. Clipped to the padding box or it would show through the frame's transparent corners. */ background: radial-gradient(ellipse at 50% 26%, #3B2A1C, #15100A 86%); background-clip: padding-box; box-shadow: inset 0 26px 34px rgba(0, 0, 0, .55); } /* The recess scrolls at EVERY width, not just on a phone — her instruction was "the shelf scrolls sideways, frame uncropped", and the frame is now literally a frame. Without this a term with more books than the shelf is wide does not overflow into nothing, it slides under her right-hand column and stops, which reads as a bug rather than as a shelf. Scrolling keeps the carving intact and lets the books run past it, which is what a full shelf does. `overflow` here is safe: .body is inside the case, not an ancestor of any sticky element. */ #s2 .body { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } #s2 .body::-webkit-scrollbar { display: none; } /* THE SHELF GROWS A BOARD INSTEAD OF SLIDING SIDEWAYS. The note above is hers and it was right for the shelf she drew; Pelin took it back on 2026-09-19 for the archive — "kaydırma güzel bir opsiyon olmuş ama ortalama internet kullanıcısı için çok zor keşfi" — and `/kitap` was rebuilt around it while THIS shelf, the first one a phone reader meets, kept scrolling. Measured: below 620px it starts hiding books, and at 390 the opening is 273px against 572px of books — two of the term's five are off screen entirely with nothing to say so. `.inner` is now the column the rows stack in and `.row` is the shelf-full that used to be `.inner`. The SPLIT is not done here — `app.js`'s reflow driver does it, the same one `/kitap` uses, so there is one piece of code deciding how many books fit a bay. Without JavaScript the server's single row keeps `max-content` and the body keeps scrolling, which is exactly today's behaviour and a fair fallback. */ #s2 .inner { flex: 1; display: flex; flex-direction: column; /* or the row's `max-content` stretches the column and the driver measures the books instead of the bay it has to fit them into */ min-width: 0; margin-inline: auto; } #s2 .row { display: flex; justify-content: center; align-items: flex-end; gap: 26px; min-height: 214px; min-width: max-content; margin-inline: auto; } /* Her own board, from the bookcase on /kitap — same walnut, same drawing. Only BETWEEN rows: the case's own plinth is the floor the bottom row stands on, so a board under it would be a second floor. */ #s2 .shelf { height: 14px; background: linear-gradient(#B07A45, #7A4E2A 60%, #4A2A12); box-shadow: 0 4px 8px rgba(0, 0, 0, .5); } #s2 .shelf:last-child { display: none; } /* The driver writes a brass plate on every board it makes. /kitap's boards say nothing now either; this shelf never had one. */ #s2 .shelf .tag { display: none; } /* ── a spine ──────────────────────────────────────────────────────────────── Her colour, her grain, her gold. The grain is one 192px tile lifted off a single spine and reduced to its texture alone (prepare-art.py), laid over whatever colour the book carries — so one 6 KB file dresses every spine on the site instead of ten plates, and a colour we have never drawn still looks like leather. */ #s2 .book { /* 106, not 118. Her spines are slimmer than the draft's: measured off the catalogue they run about 0.49 wide-to-tall, and at 118 they read as blocks rather than books. This is as narrow as the longest Turkish title will go. */ width: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px 10px; box-sizing: border-box; background-color: var(--spine); /* HOW A SPINE CATCHES LIGHT, measured across hers: a soft shadow ramp down the left where the spine rounds away (luminance 33 climbing to 61 over the first 17% of the width), a flat lit face, then a harder step at the right edge where the board of the book turns away. The draft had one hard dark strip on the LEFT and nothing on the right — the light was coming from the wrong side. Over the grain, under nothing. */ background-image: linear-gradient(90deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .14) 11%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 86%, rgba(0, 0, 0, .06) 90%, rgba(0, 0, 0, .34) 100%), url(assets/shelf/grain.webp); background-size: auto, 96px 96px; background-blend-mode: normal, overlay; /* Her spines stand ON the board and say so: a tight contact shadow at the foot, not the floating side-shadow the draft used. */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22), 3px 0 9px rgba(0, 0, 0, .42), 0 3px 5px rgba(0, 0, 0, .45); cursor: pointer; transition: transform .35s; transform-origin: bottom center; position: relative; } #s2 .book:hover { transform: translateY(-12px); } /* Her double gold rule, inset from the spine edge as she drew it. */ /* HER DOUBLE RULE IS GOLD ON EVERY SPINE — measured off the plate, including the pale ones: #FDDE6D, #F0C984, #FDDE6D. It is NOT the text colour. Tying it to `currentColor` put a heavy cream box around the taupe spine, which is the one thing in the whole shelf that looked wrong at a glance. And the text is laid out as she typeset it, not centred as a block: title near the head, her dot, the author, the month, and then a quarter of the spine left empty at the foot. That emptiness is the composition. */ #s2 .frame { position: relative; border: 1px solid var(--spine-rule); outline: 1px solid var(--spine-rule); outline-offset: 3px; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 11% 8px 25%; box-sizing: border-box; } /* Sized to sit INSIDE her gold rule with air around it, which is how she typeset it. At 15px on a 106px spine the title ran right up to the rule on both sides and the spine stopped looking like a book. */ #s2 .t{font-family:'Cormorant Garamond';font-weight:600;font-size:13px;letter-spacing:.06em;line-height:1.2;word-break:normal;overflow-wrap:break-word;max-width:100%} #s2 .t.small{font-size:11px} /* Her separator between title and author is a DOT, not a rule — the dash came from the earlier home-page comp, before she drew the shelf. Kept as .rule so the markup does not have to change. */ #s2 .rule{width:3px;height:3px;border-radius:50%;background:currentColor;margin:14% 0 auto;opacity:.75} #s2 .a{font-family:'Cormorant Garamond';font-style:italic;font-size:12px;line-height:1.3;opacity:.85} #s2 .m{font-family:'Open Sans';font-size:7px;letter-spacing:.16em;margin-top:9px;opacity:.8} /* HER TEN SPINE COLOURS, CYCLING. Sampled off the plate rather than picked — prepare-art.py prints this list and the hexes below are its output verbatim. Keyed to :nth-child and not to .b1..b5 because that class ran out at five: this term has five books, the programme shelf on /kitap has twelve, and the palette has to survive both. A tenth colour is followed by the first again, which is what she did. Only the gold spine takes dark ink; the other nine carry her #C5AA6F, as on the plate. `--spine-ink`, NOT `--ink`: styles.css:26 already defines `--ink` on :root as her bordo, and an inherited custom property beats a var() fallback — so the first version of this rule painted her deep bordo onto nine spines that meant to carry gold, and only the one spine that set the value explicitly looked right. Anything declared here is namespaced for that reason. */ #s2 .book { color: var(--spine-ink, #C5AA6F); --spine-rule: #C5AA6F; } /* A CLASS, NOT A POSITION. These ten are her plate's ten spines and they used to be `:nth-child(10n+k)` — which counted within whatever element held the books. The reflow driver moves books between rows, so the moment the shelf grew a second board every row started its own count and three of the five books changed colour and height. What a book is made of does not depend on where it happens to be standing. */ #s2 .book.s1 { --spine: #60242B; height: 202px; } #s2 .book.s2 { --spine: #152A39; height: 194px; } /* The two pale spines carry her cream, not her gold: #C5AA6F on #78634D is 1.7:1 and the title stops being a title. She made the same call herself in the draft this replaced — the one pale spine there was set to #F3EDE2. */ #s2 .book.s3 { --spine: #78634D; height: 208px; --spine-ink: #F3EDE2; } #s2 .book.s4 { --spine: #2F412E; height: 198px; } #s2 .book.s5 { --spine: #AF8842; height: 204px; --spine-ink: #3A2A16; } #s2 .book.s6 { --spine: #381C2B; height: 196px; } #s2 .book.s7 { --spine: #5D232B; height: 206px; } #s2 .book.s8 { --spine: #162B3A; height: 200px; } #s2 .book.s9 { --spine: #314330; height: 210px; } #s2 .book.s10 { --spine: #78634D; height: 192px; --spine-ink: #F3EDE2; } #s3 .sec{background:#011727;color:#F3EDE2;padding:72px 48px 80px;border-top:1px solid #C5AA6F} #s3 .wrap{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center} #s3 .cal{width:340px;margin:0 auto;background:#F3EDE2;color:#011727;padding:30px 28px 30px;box-shadow:0 30px 50px rgba(0,0,0,.55),0 2px 0 #D9CDB8;position:relative;transform:rotate(-1.2deg)} #s3 .cal:before{content:'';position:absolute;top:-14px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#C5AA6F;box-shadow:0 1px 2px rgba(0,0,0,.6)} #s3 .cal:after{content:'';position:absolute;left:0;right:0;top:0;height:18px;border-bottom:1px dashed #C9B99C} #s3 .cal .badge{width:64px;height:64px;display:block;margin:6px auto 4px} #s3 .cal .month{font-family:'Cormorant Garamond';font-size:26px;font-weight:500;letter-spacing:.14em;text-align:center;margin:14px 0 2px} #s3 .cal .year{font-family:'Open Sans';font-size:12.8px;letter-spacing:.3em;text-align:center;color:#7C6853;margin-bottom:16px} #s3 table{width:100%;border-collapse:collapse} #s3 th{font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#7C6853;font-weight:400;padding-bottom:8px;border-bottom:1px solid #C9B99C} #s3 td{text-align:center;height:38px;font-family:'Cormorant Garamond';font-size:17px;position:relative} #s3 td.mon span{position:relative;z-index:1;font-weight:600} #s3 td.mon:before{content:'';position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:1.6px solid #C5AA6F;border-radius:50% 46% 52% 48%/48% 52% 46% 50%;transform:rotate(-8deg)} #s3 td.mon.salon:before{border-color:#4A1B2F;border-width:2px} #s3 td.mon.salon span{color:#4A1B2F} #s3 .note{font-family:'Homemade Apple',cursive;font-size:16.4px;color:#4A1B2F;text-align:right;margin-top:10px;transform:rotate(-2deg)} #s3 h2{font-family:'Cormorant Garamond';font-size:56px;font-weight:500;line-height:1.05;margin:0 0 18px} #s3 .sub{font-family:'EB Garamond';font-size:21px;line-height:1.5;color:#C5AA6F;margin:0 0 26px;max-width:420px} #s3 .tiny{font-size:16.4px;color:#9FB0C2;max-width:420px;line-height:1.5} #s3 .lab{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#7C6853;padding:32px 48px 8px} #s4 .sec{background:#FAF7F0;padding:72px 48px 80px} #s4 .wrap{max-width:960px;margin:0 auto} #s4 .head{text-align:center;margin-bottom:38px} #s4 .eyebrow{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#86661C;margin-bottom:8px} #s4 .title{font-family:'Cormorant Garamond';font-size:32px;font-weight:500;margin:0} #s4 .sub{font-family:'EB Garamond';font-style:italic;font-size:17px;color:#7C6853;margin:6px 0 0} #s4 .cabinet{background:linear-gradient(#5E3A1C,#3E2414);padding:16px 18px 18px;border-radius:3px;box-shadow:0 24px 40px rgba(0,0,0,.35)} #s4 .top{height:10px;background:linear-gradient(#8A5A32,#5E3A1C);margin:-16px -26px 16px;border-radius:3px 3px 0 0} #s4 .row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} #s4 .drawer{padding-bottom:34px;background:linear-gradient(135deg,#8A5A32,#6B4222 60%,#5E3A1C);border:1px solid #3A2210;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -6px 12px rgba(0,0,0,.35);padding:18px 16px 20px;position:relative;cursor:pointer;transition:transform .3s;color:#F3EDE2} #s4 .plate{background:linear-gradient(#E8D08F,#B8923A);color:#3A2210;font-family:'Open Sans';font-size:9.5px;letter-spacing:.2em;text-align:center;padding:6px 8px;border:1px solid #7A5B1E;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);margin:0 12px 14px} #s4 .name{font-family:'Cormorant Garamond';font-size:24px;font-weight:500;text-align:center;margin-bottom:8px} #s4 .desc{font-size:15.2px;line-height:1.5;text-align:center;color:#E8DCC4;min-height:60px} #s4 .pull{width:46px;height:14px;margin:16px auto 0;border-radius:7px;background:linear-gradient(#E8D08F,#B8923A);border:1px solid #7A5B1E;box-shadow:0 2px 3px rgba(0,0,0,.4)} #s4 .lock{position:absolute;left:50%;margin-left:-7px;bottom:6px;width:14px;height:18px} #s4 .lock:before{content:'';position:absolute;left:2px;top:0;width:8px;height:8px;border:2px solid #C5AA6F;border-bottom:none;border-radius:6px 6px 0 0} #s4 .lock:after{content:'';position:absolute;left:0;top:7px;width:14px;height:11px;background:#C5AA6F;border-radius:2px} #s4 .open{position:absolute;right:12px;bottom:14px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#C5AA6F} #s4 .base{height:14px;background:linear-gradient(#3E2414,#2A1608);margin:18px -26px -18px;border-radius:0 0 3px 3px} #s4 .lab{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#7C6853;padding:32px 48px 8px} :is(#s5, .her-papers) .sec{background:#011727;padding:72px 48px 88px} :is(#s5, .her-papers) .wrap{max-width:1000px;margin:0 auto} :is(#s5, .her-papers) .head{text-align:center;margin-bottom:54px;color:#F3EDE2} :is(#s5, .her-papers) .title{font-family:'Cormorant Garamond';font-size:34px;font-weight:500;margin:0} :is(#s5, .her-papers) .sub{font-family:'Cormorant Garamond';font-style:italic;font-size:18px;color:#C5AA6F;margin:8px 0 0} :is(#s5, .her-papers) .table{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:28px;align-items:end} :is(#s5, .her-papers) .paper{background:#F3EDE2;box-shadow:0 30px 50px rgba(0,0,0,.55);position:relative;padding:26px 24px 24px} :is(#s5, .her-papers) .tag{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#7C6853} :is(#s5, .her-papers) .name{font-family:'Cormorant Garamond';font-size:28px;font-weight:500;margin:6px 0 2px} :is(#s5, .her-papers) .line{font-family:'Cormorant Garamond';font-style:italic;font-size:16.4px;color:#4A1B2F;margin-bottom:14px} :is(#s5, .her-papers) .desc{font-size:16.4px;line-height:1.55;color:#554E4E} :is(#s5, .her-papers) .btn{display:block;text-align:center;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;padding:11px;margin-top:18px;text-decoration:none} :is(#s5, .her-papers) /* zarf */ .env{transform:rotate(-2deg);padding-top:70px} :is(#s5, .her-papers) .env:before{content:'';position:absolute;left:0;right:0;top:0;height:0;border-left:170px solid transparent;border-right:170px solid transparent;border-top:80px solid #E6DCC8;width:0;margin:0 auto;left:50%;transform:translateX(-50%)} :is(#s5, .her-papers) .seal{position:absolute;top:56px;left:50%;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;background:#4A1B2F;box-shadow:0 3px 6px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center} :is(#s5, .her-papers) .seal img{width:44px;height:44px} :is(#s5, .her-papers) .field{display:flex;margin-top:18px} :is(#s5, .her-papers) .field span{border-bottom:1px solid #4A1B2F;padding:8px 4px;font-size:15.2px;color:#7C6853;flex:1} :is(#s5, .her-papers) .field b{font-family:'Open Sans';font-weight:600;font-size:12.8px;letter-spacing:.14em;padding:8px 12px;color:#4A1B2F} :is(#s5, .her-papers) /* kart */ .card{border:1px solid #C5AA6F;outline:1px solid #C5AA6F;outline-offset:-6px;transform:rotate(1deg);padding-top:24px} :is(#s5, .her-papers) .card .badge{width:60px;height:60px;display:block;margin:0 auto 12px} :is(#s5, .her-papers) .card .name{text-align:center} :is(#s5, .her-papers) .card .line{text-align:center} :is(#s5, .her-papers) .price{font-family:'Cormorant Garamond';font-size:26px;text-align:center;margin-top:16px;padding-top:14px;border-top:1px dashed #C9B99C} :is(#s5, .her-papers) .price small{font-size:15.2px;color:#7C6853} :is(#s5, .her-papers) .card .btn{background:#C5AA6F;color:#011727} :is(#s5, .her-papers) .no{font-family:'Open Sans';font-size:12.8px;letter-spacing:.24em;color:#86661C;text-align:center;margin-top:12px} :is(#s5, .her-papers) /* bilet */ .tix{transform:rotate(-1deg);border-left:2px dashed #C9B99C;margin-left:26px} :is(#s5, .her-papers) .tix:before{content:'DAVET';position:absolute;left:-26px;top:0;bottom:0;width:26px;background:#E6DCC8;writing-mode:vertical-rl;transform:rotate(180deg);font-family:'Open Sans';font-size:12.8px;letter-spacing:.3em;color:#4A1B2F;display:flex;align-items:center;justify-content:center} :is(#s5, .her-papers) .tix .btn{border:1px solid #4A1B2F;color:#4A1B2F} :is(#s5, .her-papers) .hand{font-family:'Homemade Apple';font-size:15.2px;color:#4A1B2F;margin-top:12px;transform:rotate(-1.5deg)} :is(#s5, .her-papers) .lab{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#7C6853;padding:32px 48px 8px} #s6 .t{background:#4A1B2F;color:#F3EDE2;padding:72px 48px 76px} #s6 .wrap{max-width:960px;margin:0 auto} #s6 .eyebrow{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#C5AA6F;text-align:center;margin-bottom:8px} #s6 .title{font-family:'Cormorant Garamond';font-size:32px;font-weight:500;text-align:center;margin:0 0 44px} #s6 .grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px;align-items:start} #s6 .q{border-top:1px solid #C5AA6F;padding-top:20px} #s6 .mark{font-family:'Cormorant Garamond';font-size:52px;line-height:.5;color:#C5AA6F;margin-bottom:18px} #s6 .txt{font-family:'EB Garamond';font-size:19px;line-height:1.5;margin-bottom:16px} #s6 .who{font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#C5AA6F} #s6 .close{background:#FAF7F0;color:#011727;padding:64px 48px;text-align:center;border-top:1px solid #C5AA6F} #s6 .close h2{font-family:'Cormorant Garamond';font-size:40px;font-weight:500;margin:0 0 6px} #s6 .close p{font-family:'EB Garamond';font-style:italic;font-size:18px;color:#4A1B2F;margin:0 0 26px} #s6 .cta{display:inline-block;background:#C5AA6F;color:#011727;padding:14px 30px;font-family:'Open Sans';font-size:14px;letter-spacing:.14em;text-decoration:none} #s6 .f{background:#011727;color:#9FB0C2;padding:56px 48px 26px} #s6 .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:32px;padding-bottom:32px;border-bottom:1px solid #1E3040} #s6 .brand{display:flex;align-items:center;gap:14px;margin-bottom:14px} #s6 .brand img{width:44px;height:44px} #s6 .word{font-family:'Cormorant Garamond';font-size:19px;font-weight:500;letter-spacing:.2em;color:#F3EDE2} #s6 .motto{font-family:'EB Garamond';font-style:italic;font-size:16.4px;line-height:1.5;color:#D9C9A6} #s6 .h{font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#C5AA6F;margin-bottom:10px} #s6 .links{font-family:'Open Sans';font-size:12.8px;letter-spacing:.12em;line-height:2.3} #s6 .field{display:flex;margin-top:4px} #s6 .field span{border:1px solid #1E3040;border-right:none;padding:9px 12px;font-size:15.2px;color:#7C8A9A;flex:1} #s6 .field b{background:#C5AA6F;color:#011727;padding:9px 14px;font-family:'Open Sans';font-weight:600;font-size:12.8px;letter-spacing:.12em} #s6 .bottom{display:flex;justify-content:space-between;padding-top:18px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.1em;color:#7C8A9A} /* ═══════════════════════════════════════════════════════════════════════════ OURS, appended after hers. Two jobs only. 1 · Make her newsletter field a real control that still looks like her drawing of one. Her CSS styles `.field span` and `.field b`; the input and button live inside those, so they only need their own chrome removed. 2 · The TBD layer — see below. ═══════════════════════════════════════════════════════════════════════════ */ :is(#s5, .her-papers) .field span, #s6 .field span { display: flex; align-items: center; } :is(#s5, .her-papers) .field input, #s6 .field input { all: unset; width: 100%; font: inherit; color: inherit; } :is(#s5, .her-papers) .field input::placeholder, #s6 .field input::placeholder { color: inherit; opacity: .75; } :is(#s5, .her-papers) .field b, #s6 .field b { display: flex; align-items: center; cursor: pointer; } :is(#s5, .her-papers) .field button, #s6 .field button { all: unset; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; } :is(#s5, .her-papers) .field .form-status, #s6 .field .form-status { flex-basis: 100%; margin: .5rem 0 0; font-size: 14px; } /* ═══════════════════════════════════════════════════════════════════════════ 3 · ACCESSIBILITY, added by us. Her draft is a visual comp and carries 2 :hover rules and ZERO :focus rules across 21 links, 3 buttons and 2 inputs. That is normal for a design file and not normal for a shipped page: a keyboard user currently gets no indication of where they are, which is WCAG 2.4.7 (Focus Visible). Everything below is additive — it changes nothing about her resting state, only what happens on hover, on focus, and under reduced-motion. ═══════════════════════════════════════════════════════════════════════════ */ /* One visible focus ring for the whole page, in her gold, on every focusable thing. :focus-visible so a mouse click does not leave a ring behind. */ #s1 :focus-visible, #s2 :focus-visible, #s3 :focus-visible, #s4 :focus-visible, :is(#s5, .her-papers) :focus-visible, #s6 :focus-visible { outline: 2px solid #C5AA6F; outline-offset: 3px; border-radius: 1px; } /* On the cream grounds the gold ring is low-contrast against gold furniture, so those get the burgundy ring instead. */ #s2 :focus-visible, #s4 :focus-visible { outline-color: #4A1B2F; } /* ── hover + active, per control ─────────────────────────────────────────── Each one moves a property her design already uses, so nothing new is introduced: the filled buttons lighten, the outlined ones fill, the text links take her gold underline. */ #s1 .bar nav a, #s6 .links a { transition: color .16s ease, border-color .16s ease; } /* `:not(.giris)`: GİRİŞ is in the same nav, and this out-ranked its own hover below — gold type on its gold fill, the word gone (2026-10-05). */ #s1 .bar nav a:not(.giris):hover, #s6 .links a:hover { color: #C5AA6F; } #s1 .giris { transition: background .16s ease, color .16s ease; } #s1 .giris:hover { background: #C5AA6F; color: #011727; } #s1 .cta, #s6 .close .cta, :is(#s5, .her-papers) .card .btn { transition: filter .16s ease, transform .16s ease; } #s1 .cta:hover, #s6 .close .cta:hover, :is(#s5, .her-papers) .card .btn:hover { filter: brightness(1.08); } #s1 .cta:active, #s6 .close .cta:active, :is(#s5, .her-papers) .card .btn:active { transform: translateY(1px); } #s1 .link, #s2 .more { transition: color .16s ease, border-color .16s ease; } #s1 .link:hover, #s2 .more:hover { color: #C5AA6F; border-color: #C5AA6F; } :is(#s5, .her-papers) .tix .btn { transition: background .16s ease, color .16s ease; } :is(#s5, .her-papers) .tix .btn:hover { background: #4A1B2F; color: #F3EDE2; } /* The books lift off the shelf — her note asks for exactly this: "Kapağa gelince kitap raftan bir parmak yukarı kalkar." */ #s2 .book { transition: transform .18s ease; } #s2 .book:hover, #s2 .book:focus-within { transform: translateY(-8px); } /* The newsletter controls */ :is(#s5, .her-papers) .field, #s6 .field { transition: border-color .16s ease; } :is(#s5, .her-papers) .field:focus-within span, #s6 .field:focus-within span { border-color: #C5AA6F; } :is(#s5, .her-papers) .field b:hover, #s6 .field b:hover { filter: brightness(1.08); } /* Anything that moves, stops moving, for people who ask for that. */ @media (prefers-reduced-motion: reduce) { #s1 *, #s2 *, #s3 *, #s4 *, :is(#s5, .her-papers) *, #s6 * { transition: none !important; animation: none !important; } #s2 .book:hover, #s4 .drawer:hover { transform: none; } } /* Her `.mon span` marks club Mondays with a gold ring — colour alone. The underline is a second, non-colour channel for the same information. */ #s3 .cal td.mon span { text-underline-offset: 2px; } /* Screen-reader-only text, for the labels added in the markup. */ .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* The spines became so a book is reachable by keyboard and opens its page — her note asks for exactly that ("tıklanınca kitabın kendi sayfasına gidilir"). As anchors they inherit link chrome, so it is removed here rather than in her block. */ /* The spines became . Remove only the link chrome — NOT the colour: she sets a per-spine colour on .b1..b5 (#C5AA6F on four, #F3EDE2 on the pale one) and `color: inherit` overrode all five, leaving dark type on a dark board. `display` stays flex so her centring survives. */ #s2 a.book { text-decoration: none; } /* Her `overflow-wrap: break-word` splits inside a word when the spine is 118px wide — YÜRÜME/K, CANDID/E. Break at spaces only, and let the two genuinely long titles use her `.small` size plus a slightly tighter track so they fit on their own lines. `none` became `manual` once the titles started carrying soft hyphens at their real Turkish syllable breaks (`soften`, data.mjs). It was the arbitrary split that was the complaint, not breaking as such — and with nothing at all allowed, YÜRÜMEK simply ran 5px out past the end of its spine. Now it breaks YÜRÜ-MEK, where it should. */ #s2 .t { overflow-wrap: normal; word-break: keep-all; hyphens: manual; } #s2 .t.small { letter-spacing: .04em; line-height: 1.15; } /* No container query here: `container-type` on .frame adds containment that disturbs her flex sizing, and `word-break: keep-all` above already stops the mid-word split that was the actual complaint. Her 15px stands. */ /* ═══════════════════════════════════════════════════════════════════════════ 4 · RESPONSIVE, added by us. Her delivery is a desktop comp: 19 files, one @media rule, and none of it about width. Every section is a fixed multi-column grid, so under ~900px the page does not degrade gracefully — it overflows. Two of these reflows are HER instruction, not our invention: · the shelf scrolls sideways rather than shrinking — "Telefonda kitaplık tek raf olarak sığmayabilir; o durumda raf yatay kaydırılır, kitaplık çerçevesi kırpılmadan kalır." · the phone bar is logo + ATHENAUM + one menu icon — "Telefonda logo, ATHENAUM ve tek bir menü simgesi." The second is only partly done here: the links wrap into a tidy row instead of collapsing behind an icon. A real menu button is a build, and it is on the TBD list rather than faked. ═══════════════════════════════════════════════════════════════════════════ */ /* Nothing may push the page sideways. */ #s1, #s2, #s3, #s4, :is(#s5, .her-papers), #s6 { overflow-x: clip; } @media (max-width: 900px) { /* 1 · hero stacks, image under the words */ #s1 .hero { grid-template-columns: 1fr; padding: 36px 20px 44px; min-height: 0; gap: 28px; } #s1 .hero h1 { font-size: 34px; line-height: 1.15; } #s1 .arch { max-width: 340px; margin-inline: auto; } /* the bar: ONE row. Her four links plus the wordmark want 583px of a 390px screen, which is why this used to wrap into a brand row and a nav row — 132px, a sixth of the screen, three stacked bands before her composition could start. The section links move into the menu (templates.mjs) and the row keeps her mark, her wordmark, the menu and GİRİŞ: 56px, one band. */ #s1 .bar { height: 56px; padding: 0 16px; gap: 10px; } #s1 .bar nav { display: none; } #s1 .bar .bar-menu { display: flex; } #s1 .bar .bar-giris { display: inline-flex; } #s1 .brand { gap: 10px; } #s1 .brand img { width: 34px; height: 34px; } #s1 .word { font-size: 16.4px; letter-spacing: .16em; } /* 2 · the shelf scrolls sideways, frame uncropped — her instruction */ #s2 .head { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 20px; } /* THE FURNITURE SCALES, NOT JUST THE BOX. border-width is what holds the carving's proportions, so leaving it at the desktop 86px put 171px of column into a 254px case and left the shelf a slot two-thirds narrower than its own frame. These are the same nine-percent columns, at this width. `border-image-width` follows so the painted base keeps overhanging the shelf line as it does above. The section's own 48px gutter goes too: it was costing the shelf 96px of the 390 a phone has, and .case carries its own margin. */ #s2 { padding-inline: 0; } #s2 .case { max-width: none; margin-inline: 16px; border-width: 72px 60px 47px 61px; border-image-width: 145.6px 60px 60px 61px; } #s2 .row { gap: 18px; } /* 3 · calendar above the copy */ #s3 .wrap { grid-template-columns: 1fr; gap: 32px; padding: 0 20px; } #s3 .cal { margin-inline: auto; } #s3 h2 { font-size: 30px !important; } /* 4 · four drawers become two, then one */ #s4 .wrap { padding: 0 20px; } #s4 .row { grid-template-columns: repeat(2, 1fr); } /* 5 · the three papers stack, and stop being angled while stacked. ONLY the rotation goes. This used to zero every margin too, and the ticket's one margin is the gutter its stub lives in — `.tix::before` sits at `left: -26px` and `margin-left: 26px` is the room made for it. Without it the stub hung outside the paper, 26px out of line with the two stacked above it, on the width where alignment is the only thing holding the three together. */ :is(#s5, .her-papers) .wrap { padding: 0 20px; } :is(#s5, .her-papers) .table { grid-template-columns: 1fr; gap: 22px; align-items: stretch; } :is(#s5, .her-papers) .paper { transform: none !important; } /* 6 · voices, footer */ #s6 .wrap { padding-inline: 20px; } #s6 .grid { grid-template-columns: 1fr; gap: 26px; } #s6 .cols { grid-template-columns: repeat(2, 1fr); gap: 24px; } #s6 .bottom { flex-direction: column; gap: 8px; text-align: left; } #s6 .close h2 { font-size: 28px; } } @media (max-width: 560px) { /* A third scale for the furniture. The 900 step still leaves her columns at 17% of a 390px phone against 9% on a desktop — carving is expensive in a narrow box, and two-thirds of the shelf was frame. */ #s2 .case { border-width: 50px 42px 33px 43px; border-image-width: 101.9px 42px 42px 43px; } #s1 .hero h1 { font-size: 27px; } #s4 .row { grid-template-columns: 1fr; } #s6 .cols { grid-template-columns: 1fr; } #s3 .cal { width: auto; max-width: 320px; } #s2 .head .title { font-size: 25px; } } /* Touch targets: her nav links and footer links are 9–10px text with no padding, which is a ~12px tap target. 44px is the floor. */ @media (pointer: coarse) { #s1 nav a, #s6 .links a, #s2 .more, #s1 .link { min-height: 44px; display: inline-flex; align-items: center; } :is(#s5, .her-papers) .field b, #s6 .field b { min-height: 44px; } } @media (max-width: 359px) { /* Same gutter problem on her home page, plus the usual grid-item default: `min-width: auto` stops a column shrinking below its content. */ #s1 .hero > *, #s3 .cols > *, #s6 .cols > * { min-width: 0; } #s1 .hero h1 { overflow-wrap: break-word; } #s1 .bar { padding-inline: 12px; } #s1 .hero, #s2 .head, #s3 .wrap, #s4 .wrap, :is(#s5, .her-papers) .wrap, #s6 .wrap { padding-inline: 12px; } #s2 .case { margin-inline: 12px; } #s6 .cols { gap: 18px; } } /* ── focus rings that lost a specificity fight ──────────────────────────── `:is(#s5, .her-papers) .field input { all: unset }` (0,1,2 + id) outranks the generic `:is(#s5, .her-papers) :focus-visible` ring, so the newsletter input focused with no indication at all. These are written at the same or higher specificity. The demo dialog is ours, not hers, and was never in the styled scope. */ :is(#s5, .her-papers) .field input:focus-visible, #s6 .field input:focus-visible, :is(#s5, .her-papers) .field button:focus-visible, #s6 .field button:focus-visible { outline: 2px solid #C5AA6F; outline-offset: 2px; } :is(#s5, .her-papers) .field:focus-within span, #s6 .field:focus-within span { border-color: #C5AA6F; } .skip:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 3px; } /* ═══════════════════════════════════════════════════════════════════════════ THE CARD CABINET, AS THE ILLUSTRATOR DREW IT ═══════════════════════════════════════════════════════════════════════════ Her four drawers were CSS gradients under an İLLÜSTRASYON BEKLENİYOR marker. The plate arrived and is cut by prepare-art.py into the carcass (a 9-slice: slab, rails, plinth) and the two drawer faces she drew — one with a padlock, one without, which is exactly the two states DRAWERS carries. The frame scales with the case, for the reason the bookcase does on /kitap: the plate is 1528px of furniture with a 29px rail and a 60px slab, so a cabinet W wide owes its border W/1528 of each, or the mouldings stretch in one axis and not the other. `cqw` is the cabinet's own width. */ #s4 .cabinet { container-type: inline-size; max-width: 980px; margin: 0 auto; background: none; padding: 0; border-radius: 0; /* `drop-shadow`, NOT `box-shadow`. A box-shadow follows the border box, and this box is a rectangle while the furniture inside it is not: her top slab is drawn in perspective with an angled wedge at each end, so the shadow ran on past the wood in a hard rectangular halo with the corners hanging in mid-air. A filter follows what is actually painted, border-image and all. AND THE OLD ONE HAS TO BE TURNED OFF BY NAME. Her CSS-drawn cabinet set `box-shadow: 0 24px 40px` up at `#s4 .cabinet`, and this block — same specificity, later in the file — only wins the properties it declares. `box-shadow` was not one of them, so BOTH shadows were painting: the rectangular halo the note above describes was still there, under the filter, and you could read the two of them as two ramps in a pixel scan off the left edge. Resetting a property this block already replaces is not redundant; it is the whole reset. */ box-shadow: none; /* AND NO FILTER EITHER, since 2026-09-23. A drop-shadow on the cabinet is a shadow on everything painted inside it — the pulled drawer included — so it moved with the drawer and re-rasterised the whole cabinet on every frame of the pull, which is where the flicker she saw came from. Her call: no shadows on anything that moves (see CAB_OPEN_SHADOWS in prepare-art.py). The furniture is grounded by the contact shadow painted into her own plate. */ filter: none; } /* The slab, on its own — see the note in prepare-art.py for why it is not part of the carcass below. NOT a 3-slice, though it started as one. A slice boundary is sampled twice, once for each region, and each sampling clamps at its own edge: with her grain running across it, the two edges landed a shade apart and drew a pale vertical line down the slab, 70px in from each end, at both ends. There is no need for the slice at all — the cabinet is at most 980px and the plate is 1528, so the slab is never stretched, only scaled down. One image, one sampling, and the aspect held by the box so the scale stays uniform. */ #s4 .slab { aspect-ratio: 1528 / 60; background: url(assets/cabinet/slab.webp) center / 100% 100% no-repeat; } #s4 .drawers { --px: calc(100cqw / 1528); display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 0; border: solid transparent; border-width: 0 calc(27 * var(--px)) calc(114 * var(--px)) calc(29 * var(--px)); border-image: url(assets/cabinet/cabinet.webp) 0 27 114 29 fill stretch; } /* Each face keeps the aspect it was drawn at, so two columns on a phone make the drawing BIGGER rather than squashing it. */ #s4 .drawer { position: relative; /* The label is set against the DRAWER, not the cabinet: the cabinet keeps its width while the column count halves on a phone, so a size tied to it made the plate twice as small and the type on it exactly the same. */ container-type: inline-size; aspect-ratio: 368 / 400; background: url(assets/cabinet/drawer.webp) center / 100% 100% no-repeat; display: block; padding: 0; border: 0; /* Same reset as the cabinet's, and for the same reason: her gradient drawer carried `inset 0 1px 0 rgba(255,255,255,.12), inset 0 -6px 12px rgba(0,0,0,.35)` to fake a lit top edge and a shaded bottom. Over her DRAWING that is a white hairline across the wood and a black vignette across the plinth rail — two pieces of CSS lighting laid on top of the lighting she actually painted. */ box-shadow: none; text-decoration: none; /* The carcass stays still. Moving or filtering this link while its front and box slide changes their compositing layer during the pull in Safari. */ transform: none; filter: none; transition: none; } #s4 .drawer.is-locked { background-image: url(assets/cabinet/drawer-locked.webp); } /* ── THE DRAWER, BUILT ───────────────────────────────────────────────────── Until 2026-10-01 an open drawer was her second drawing, cross-faded over the first in 180ms. The owner: "çekmece olarak açılmıyor, yarım kalıyor, alt tabanı yok gibi" — and on a phone, Yazılar went UNDER Salon. Her two drawings are not one scene seen twice (assets/ENCODING.md), so every frame between them was a dissolve, and mid-dissolve you saw the cards through the front. Timing could only hide that; it could not make a drawer. So a drawer that opens is now three real things under ONE camera: .front — her closed face, the same pixels the tile shows at rest, so nothing is ever swapped. It comes toward the viewer (translateZ), which under the camera makes it nearer, larger and lower — a drawer pulled out under an eye above it. .box — the drawer's box behind the front: a horizontal plane hinged on the front's top edge and running back into the cabinet, wearing her cards rectified to a view from above. It moves with the front, so the cards come out WITH the drawer, nearest first, and the back board arrives last. .hole — the dark of the slot, which never moves. `.rig` is the camera: `perspective` with its eye above the drawer, and a clip at the slot's top edge, which is the carcass rail the box slides out from under. Every plane is a direct child, flat, painted in source order — no preserve-3d, so nothing waits on a browser's depth sort, iOS included. THE CAMERA, as three numbers, all in the drawer's own terms: --vp where the eye is, in tile heights above the tile's top. Higher is a flatter, more oblique look; lower makes the box splay harder. --k how much nearer the front comes: its scale fully out. --f how much the front foreshortens as it nears an eye above it. Her own open drawing makes it far shorter (0.65 of the width ratio); this is a little of that, enough to stop it hanging so far below the plinth. With these the box shows from the slot's top edge to 55% down the tile, the front's bottom edge lands at 1.56 tile heights (--reach), and the box's back board just reaches the slot: the drawer is all the way out. --P only sets the units the depth is counted in; nothing on screen depends on it. */ #s4 .wrap { --cols: 4; --vp: -3; /* also written out in `.rig`'s perspective-origin */ --k: 1.164; --f: .92; /* Where the pulled front's bottom edge lands, in tile heights below the tile's top: the camera applied to the face's bottom edge (y 99.25%), foreshortened about its top (y 4.75%). The notes' room is made of it. */ --reach: calc(var(--vp) + (.0475 - var(--vp)) * var(--k) + .945 * var(--k) * var(--f)); } #s4 .cabinet { --P: 1000cqw; --z: calc(var(--P) * (1 - 1 / var(--k))); /* the pull, and the box's length */ --open: .52s cubic-bezier(.3, .05, .15, 1); /* a hand: a tug, a run, a settle */ --shut: .4s cubic-bezier(.45, 0, .6, 1); /* pushed home, stops at the back */ } #s4 .drawer .rig { position: absolute; inset: 0; pointer-events: none; perspective: var(--P); /* --vp as a percentage, WRITTEN OUT: change the two together. Safari drops any var() here, `calc(var(--vp) * 100%)` and a plain `var(--vp-y)` alike, and puts the eye at the centre (86px, not -519px, on iOS 26.5): the face only grew a little, the box stayed edge-on, and on her iPhone and Mac the drawers did not open (2026-10-02). */ perspective-origin: 50% -300%; /* The rail above the slot. Only the top is clipped: below and beside it the drawer is in front of the cabinet and nothing covers it. */ clip-path: polygon(-60% 4.75%, 160% 4.75%, 160% 400%, -60% 400%); } /* Her face as drawn, inside its 368x400 tile: x 24..353, y 19..397 — where the mitred frame's outer corner is (CAB_FACE_INK). All three planes stand on it. */ #s4 .drawer :is(.hole, .box, .front) { position: absolute; left: 6.522%; width: 89.402%; } #s4 .drawer :is(.hole, .front) { top: 4.75%; height: 94.5%; } #s4 .drawer .hole { background: linear-gradient(#140c06, #22160e); /* Only ever seen through a seam. Shown the moment the drawer moves, gone once it is home again, so at rest it cannot fringe the face's edge. */ opacity: 0; transition: opacity 0s linear .4s; } #s4 .drawer .box { bottom: 95.25%; /* its near edge on the front's top edge */ height: var(--z); transform-origin: 50% 100%; transform: translateZ(0) rotateX(90deg); /* Darker toward the back, where the cabinet keeps the light out. On the box itself, so it moves with it — not a shadow over the page. */ background: linear-gradient(rgba(20, 12, 6, .62), rgba(20, 12, 6, .18) 30%, rgba(20, 12, 6, 0) 60%), url(assets/cabinet/drawer-box.webp) 0 0 / 100% 100% no-repeat; transition: transform var(--shut); } #s4 .drawer .front { transform-origin: 50% 0; /* `none` at rest, not an identity 3D transform: a 3D transform puts the face on a layer of its own all the time, and its type and grain are then resampled once more than the locked faces beside it. It interpolates from `none` exactly as from translateZ(0) scaleY(1). */ transform: none; transition: transform var(--shut); /* The pulled front is part of the link, so moving onto it — to click the drawer you just opened — keeps it open. It used to be a pseudo-element with no hit area, and the drawer shut under the pointer on the way. */ pointer-events: auto; } #s4 .drawer:not(.is-locked) .front { background: url(assets/cabinet/drawer.webp) 61.538% 86.364% / 111.854% 105.82% no-repeat; } /* A completed touch tap opens through `.is-pulled` (app.js); keyboard focus and genuine hover open directly. Never start on `:active`: Safari clears it on release before click adds `.is-pulled`, canceling and restarting the pull's easing curve. iOS can also retain `:hover` after a tap, so hover is confined to devices that support it. */ #s4 .drawer:not(.is-locked):is(:focus-visible, .is-pulled) .front { transform: translateZ(var(--z)) scaleY(var(--f)); transition: transform var(--open); } #s4 .drawer:not(.is-locked):is(:focus-visible, .is-pulled) .box { transform: translateZ(var(--z)) rotateX(90deg); transition: transform var(--open); } #s4 .drawer:not(.is-locked):is(:focus-visible, .is-pulled) .hole { opacity: 1; transition: none; } /* WHICH DRAWER IS IN FRONT. A pulled drawer is nearer than every face it passes over, so it paints over them — on a phone that is the drawer BELOW it. Both unlocked drawers used to share one z-index, and the later one in the source won: Yazılar slid under Salon, and looked as if it would not open. The one being opened is on top of everything; one still sliding home holds the step under it (`drawer-shut`, restarted each time the pointer leaves) until it is in. */ #s4 .drawer:not(.is-locked) { z-index: 3; animation: drawer-shut .4s; } #s4 .drawer:not(.is-locked):is(:focus-visible, .is-pulled) { z-index: 5; animation: none; } @keyframes drawer-shut { from, to { z-index: 4; } } @media (hover: hover) { #s4 .drawer:not(.is-locked):hover .front { transform: translateZ(var(--z)) scaleY(var(--f)); transition: transform var(--open); } #s4 .drawer:not(.is-locked):hover .box { transform: translateZ(var(--z)) rotateX(90deg); transition: transform var(--open); } #s4 .drawer:not(.is-locked):hover .hole { opacity: 1; transition: none; } #s4 .drawer:not(.is-locked):hover { z-index: 5; animation: none; } } /* Her blank brass card, measured off the plate: x 112..260 and y 115..173 of a 368x400 tile, so x 88..236 and y 96..154 of the 329x378 face it is on. The title is set INSIDE it, which is what a label plate is — and inside `.front`, so it rides out with the drawer, scaled as the face is. */ #s4 .drawer .label { position: absolute; left: 26.748%; width: 44.985%; top: 25.397%; height: 15.344%; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; /* Her card is 40.2% of a tile; the longest of the four titles sets the size that fits inside it, and all four take it so the row reads as one cabinet. `cqw` is the drawer's: neither `.rig` nor `.front` is a container. */ font-size: 4.5cqw; line-height: 1; letter-spacing: .03em; /* Declared, not inherited. styles.css's `.label` — the site's small tracked label voice — carries `text-transform: uppercase`, and that is what has been setting these cards in caps all along: this rule overrode its font and colour but never its case, so the look depended on a rule that has nothing to do with the cabinet. Caps is right for a card-index label, so it stays — as a decision made here. */ text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden; color: #4A2E18; text-shadow: 0 1px 0 rgba(255, 252, 240, .5); } /* The kicker and the body, under the cabinet in the cabinet's own columns — visible without opening anything, which on a phone is the whole point. */ #s4 .cab-notes { list-style: none; max-width: 980px; margin: 26px auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } /* HER INK, NOT THE DRAWER'S. These descriptions used to sit inside the drawers, on wood, and carried the pale cream that needed. Out here they are on the section's own #FAF7F0 and pale cream on cream is nothing at all — the four titles were invisible until somebody looked at a phone. */ #s4 .cab-notes li { font-size: 15.2px; line-height: 1.55; color: #6B5A49; text-align: center; } /* The title reads here as well as on the plate. Her drawn card is small — it is a card-catalogue label — and on a phone two columns make it smaller still; the name of the drawer should not be the thing a reader has to squint at. */ #s4 .cab-notes .who { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; font-weight: 500; color: #4A1B2F; margin-bottom: 5px; } #s4 .cab-notes .kicker { display: block; font-family: 'Open Sans', system-ui, sans-serif; font-size: 12.8px; letter-spacing: .2em; color: #86661C; margin-bottom: 7px; } @media (max-width: 720px) { /* Her section padding is 48px a side, which on a 390px screen left the cabinet 254px and her drawn label card 5.5px of type on it. The furniture takes the width instead; it is the thing the section is about. */ #s4 .sec { padding-left: 16px; padding-right: 16px; } /* Two drawers a row, which makes each drawn face twice the size rather than half of it, and keeps the label readable. */ #s4 .wrap { --cols: 2; } #s4 .cab-notes { grid-template-columns: repeat(2, 1fr); gap: 18px; } #s4 .cab-notes .who { font-size: 19px; } } /* ── THE THREE PAPERS, FINISHED ──────────────────────────────────────────── `:is(#s5, .her-papers)` carried an `İLLÜSTRASYON BEKLENİYOR · ÜÇ KÂĞIT` marker. The drawings are not coming and these three are the design, so the marker is gone and what is left is the parts that were only ever going to be replaced. THE ENVELOPE'S FLAP WAS A FIXED TRIANGLE IN A FLUID COLUMN, and that is the whole bug. It is drawn with `border-left: 170px solid transparent` and the same on the right — 340px of flap, on a paper that is 310px wide at 1440 and 257px on a phone. Its corners hung over BOTH edges at every width the site is ever seen at, worst where the section is narrowest, which is where most of the readers are. A clip-path takes its width from the box instead. The rest of this is what turns a pale wedge into a flap: it is folded paper, so it catches the light along the fold, deepens toward its free edge, and casts onto the face it is lying on. */ :is(#s5, .her-papers) .env { /* The flap has to be a proportion of the paper, not a number of pixels, and `cqw` is the only unit that can say so. */ container-type: inline-size; padding-top: 26px; /* back to `.paper`'s own — see below */ /* CAPPED, because a flap is a proportion of the envelope and the envelope stops being envelope-shaped when the three papers stack: at 900px it is 764px wide and 31% of that is 222px of flap over a paragraph. A real wide envelope — a #10 is 9.5in by 4.1in — has a WIDE SHALLOW flap, about a fifth of its width, not a third. The cap is what turns the one into the other; below it nothing changes, and the column she drew this at is below it. One declaration, because the seal has to land on the point. */ --flap: min(31cqw, 96px); } :is(#s5, .her-papers) .env::before { /* IN FLOW, not absolute, and that is not a style choice. A container query unit used ON the container resolves against the next container OUT, not the element itself — so `padding-top: calc(31cqw + 34px)` on `.env` came back as 31% of the VIEWPORT: 480px of padding and a 728px envelope. The flap is a descendant, so its own `cqw` is right; letting it take up space rather than reserving space for it means the number is only written once. Every declaration here undoes a line of the border-triangle it replaces: that set a width and a height of 0, three borders, a left of 50% and a translate to pull itself back. None of it survives a clip-path. */ position: static; display: block; width: auto; height: var(--flap); margin: -26px -24px 14px; /* out to the paper's edges, then breathe */ border: 0; transform: none; background: linear-gradient(#EFE6D5, #E4D9C2 62%, #DBCFB3); clip-path: polygon(0 0, 50% 100%, 100% 0); /* `drop-shadow`, not `box-shadow`. The shadow has to follow the V, and the V is alpha, not the border box — the same distinction the card cabinet's furniture turns on. */ filter: drop-shadow(0 4px 5px rgba(1, 23, 39, .22)); } /* Wax, poured and pressed, not a maroon disc: it sits on the flap's point at every width, it is not quite round, and it is lit from the same corner as everything else on the page. The irregular radius is her own — it is what draws the hand-made ring around a club Monday on the calendar leaf. */ :is(#s5, .her-papers) .seal { top: calc(var(--flap) - 26px); border-radius: 50% 47% 53% 48% / 48% 53% 47% 52%; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .22), transparent 58%), radial-gradient(circle at 72% 80%, rgba(0, 0, 0, .28), transparent 64%), #4A1B2F; box-shadow: 0 3px 7px rgba(1, 23, 39, .45), inset 0 0 0 1px rgba(255, 252, 240, .09); } /* AND IT IS SHORTER THAN THE OTHER TWO, on purpose. A card is portrait and an envelope is not: at her spacing this one came out 300 wide by 350 tall, which is a tall card with a triangle on it. Nothing here changes a typeface or a size — it is the vertical rhythm only, and only inside the envelope, so the card and the ticket keep hers. Square is close enough to landscape to read as post. */ :is(#s5, .her-papers) .env .name { margin: 2px 0 0; } :is(#s5, .her-papers) .env .line { margin-bottom: 8px; } :is(#s5, .her-papers) .env .field { margin-top: 10px; } :is(#s5, .her-papers) .env { padding-bottom: 18px; } /* All three are paper with a cut edge, and a lit top edge is what says so. */ :is(#s5, .her-papers) .paper { box-shadow: 0 30px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .7); } @media (max-width: 620px) { /* Stacked, the card is ~300px of content and `₺480 / ay · istediğiniz zaman iptal` does not fit on one line — it broke after "zaman" and left "iptal" alone under a 26px price, which reads as a second, empty line of pricing. The terms belong under the number anyway once there is no room beside it. */ :is(#s5, .her-papers) .price small { display: block; margin-top: 4px; font-size: 15.2px; } } /* ── the footer, on a phone ────────────────────────────────────────────────── 2026-09-23 revision list, mobil 2: "Footer görüntüsü geliştirilmeli." Below 560px her four columns collapsed to one, and the 44px tap floor turned ten links into a 600px column of underlined caps — a list, not a footer. The two link lists sit side by side now, the brand and the newsletter span the width, the links lose the browser's underline (her design never had one: her links are coloured, and take gold on hover) and the legal line gets a real size. The 44px floor is kept; a
between two 44px boxes was adding a third, empty line to every link, so the lists are grids instead. */ #s6 .links a { text-decoration: none; } @media (max-width: 560px) { #s6 .f { padding: 44px 0 28px; } #s6 .cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; } #s6 .cols > :first-child, #s6 .cols > :last-child { grid-column: 1 / -1; } #s6 .links { display: grid; justify-items: start; line-height: 1.4; } #s6 .links br { display: none; } #s6 .links a { font-size: 14px; min-height: 40px; display: inline-flex; align-items: center; } #s6 .h { font-size: 14px; margin-bottom: 4px; } #s6 .motto { font-size: 17px; } #s6 .bottom { font-size: 14px; line-height: 1.8; gap: 10px; } } /* ── no cast shadow on a book that moves ───────────────────────────────────── 2026-09-23 revision list, web 14: "hareketli yerlerdeki gölgeleri kaldıralım … glitche sebep oluyorlar." A spine lifts on hover, and its side and foot shadows lifted with it — a shadow cast on the next book and on the board, travelling 8px with the book that casts it. The inset keeps the spine's edge; the light ramp across it is a background, not a shadow, and stays. */ #s2 .book { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); } /* ── room for the pulled drawer ────────────────────────────────────────────── The pulled front hangs below the plinth, and the notes sat 26px under it — so opening Salon covered Salon's own title and text, in her screenshot of the drawer. The room is the overhang itself, from the camera that makes it ("THE DRAWER, BUILT"), plus 12px: a tile is 104.71% of the cabinet's width over the column count tall, the plinth under the last row is 114/1528 of it whatever the columns, and a margin percentage resolves against that same width. It was two guesses, 9% and 19%; the phone's was 10px short. */ #s4 .cab-notes { margin-top: max(26px, calc((var(--reach) - 1) * 104.71% / var(--cols) - 7.461% + 12px)); } /* ── Meclis: both prices ───────────────────────────────────────────────────── Her athenaum_uyelik_uc_kagit.html, resent with the 2026-09-23 revision list (web 9). Her values, from her inline styles, with two changes: the label tracks at .1em rather than .16em, because at the raised size (legible.mjs) "YILLIK · İKİ AY HEDİYE" broke onto three lines in a phone-width box; and the boxes are equal height, so the two prices sit on one line. */ :is(#s5, .her-papers) .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed #C9B99C; } :is(#s5, .her-papers) .duo .opt { border: 1px solid #C9B99C; padding: 12px 8px; text-align: center; display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: border-color .16s ease; } :is(#s5, .her-papers) .duo .opt:hover { border-color: #C5AA6F; } :is(#s5, .her-papers) .duo .opt.is-year { border-color: #C5AA6F; background: #FAF7F0; } /* Two lines for every label, so a label that wraps ("YILLIK · İKİ AY HEDİYE") and one that does not ("AYLIK") put both prices on one line; 2.6em was two lines before the type was raised, and 10px short of it after. */ :is(#s5, .her-papers) .duo .k { font-family: 'Open Sans'; font-size: 12.8px; letter-spacing: .1em; color: #7C6853; min-height: 2.6em; min-height: 2lh; display: flex; align-items: center; justify-content: center; } :is(#s5, .her-papers) .duo .is-year .k { color: #86661C; } :is(#s5, .her-papers) .duo .v { font-family: 'Cormorant Garamond'; font-size: 26px; margin: 4px 0 0; } :is(#s5, .her-papers) .duo .u { font-size: 14px; color: #7C6853; } :is(#s5, .her-papers) .substack { font-size: 15.2px; line-height: 1.5; color: #7C6853; text-align: center; margin-top: 8px; } /* Her section padding (48px) survived onto phones under the wrap's own 20px, so the three papers had 68px of navy each side — a 254px card on a 390px screen. The wrap's 20px is the gutter. */ @media (max-width: 900px) { :is(#s5, .her-papers) .sec { padding-left: 0; padding-right: 0; } } /* ── TÜM PROGRAM, on the plinth ────────────────────────────────────────────── Her brass: the gradient, the dark edge and the engraved ink of the plate on her /kitap shelves (`.shelf .tag`, program.css). Centred on the plinth — the bottom border of .case, whose height changes at each breakpoint, so the plate is sized to that board rather than to the viewport. Fitted type, so legible.mjs leaves it as set here. */ #s2 .case { --plinth: 66px; } #s2 .plate { position: absolute; left: 50%; bottom: calc(var(--plinth) / -2); transform: translate(-50%, 50%); z-index: 2; white-space: nowrap; padding: 7px 20px 6px 22px; background: linear-gradient(#E8D08F, #B8923A); border: 1px solid #7A5B1E; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); color: #3A2210; font: 600 13px/1 'Open Sans', system-ui, sans-serif; letter-spacing: .22em; text-decoration: none; transition: filter .16s ease; } #s2 .plate:hover, #s2 .plate:focus-visible { filter: brightness(1.1); } #s2 .plate:focus-visible { outline: 2px solid #4A1B2F; outline-offset: 3px; } @media (max-width: 900px) { #s2 .case { --plinth: 47px; } #s2 .plate { font-size: 12px; padding: 6px 16px 5px 18px; } } @media (max-width: 560px) { #s2 .case { --plinth: 33px; } #s2 .plate { font-size: 11px; padding: 5px 12px 4px 14px; letter-spacing: .18em; } } /* ── THE CLOSING BAND, ON HER STOCK ────────────────────────────────────────── Her review, 2026-09-29: "Derin sorular"ın arka planını dokulu yapsak nasıl olur — and she sent the stock. Its tooth is here at her own scale, one 256px tile (prepare-art.py, cut_paper), in the band's own cream rather than her sheet's: her stock averages #E3DAD0, a grey card under the gold button that was chosen against this cream. The band sits alone between the bordo of the voices and the navy of the footer, so it reads as one sheet of card, and the light falls off a little toward its edges the way it does off anything held. */ #s6 .close { background-color: #FAF7F0; background-image: radial-gradient(ellipse 110% 150% at 50% 40%, rgba(96, 72, 40, 0) 50%, rgba(96, 72, 40, .08) 100%), url(assets/paper/band.webp); background-size: auto, 256px 256px; } /* ── MEKTUP, A LINK NOW ────────────────────────────────────────────────────── Her two newsletter fields drew an input and a button. Mektup is joined through the platform's checkout since 2026-09-30, so each field is one link, and its first box carries a label, not an address. Her placeholder grey on that label read as an empty input to type into; the ink of each band says it is text. */ :is(#s5, .her-papers) a.field, #s6 a.field { text-decoration: none; } :is(#s5, .her-papers) a.field span { color: #4A1B2F; } #s6 a.field span { color: #E8E0D2; } :is(#s5, .her-papers) a.field:focus-visible, #s6 a.field:focus-visible { outline: 2px solid #C5AA6F; outline-offset: 3px; } /* ═══════════════════════════════════════════════════════════════════════════ SCOPE GUARD for her sub-pages. Loaded BEFORE her stylesheets so anything she defines still wins; this only sets the ground and neutralises ours. styles.css is written for the rest of the site with unscoped selectors — `a`, `h1`, `h2`, `h3`, `section`, `.btn`, `.wrap`, `.card`, `.field`. Inside her pages those repaint her design in our palette: on the book page the CTA rendered burgundy type on her navy panel, and every link she has turned burgundy-on-dark. Same failure the home page had; this is the general fix. Colour is reset to `inherit` rather than to a value, so her own rules — and the cascade she designed — decide. THE TRAP: this selector is `[data-page] :is(a, p, span, …)` — one attribute and one element, so (0,1,1). Anything of OURS that lands inside her pages and sets a colour with a single class is (0,1,0) and loses to it. The footer's copyright line did, on every sub-page, and came out navy on navy. Our own chrome in here carries two classes for that reason — see `.her-foot .her-foot-legal` and `.card .her-handoff` in her-pages.css. ═══════════════════════════════════════════════════════════════════════════ */ [data-page] :is(a, h1, h2, h3, h4, p, blockquote, cite, li, dt, dd, span, div, b, strong, em) { color: inherit; } [data-page] a { text-decoration: none; } [data-page] section { padding: 0; } [data-page] .wrap { width: auto; margin-inline: 0; } [data-page] :is(.btn, .card, .field, .label, .price, .panel, .grid, .list, .row, .tier, .drawer) { all: unset; box-sizing: border-box; display: revert; } /* Her top bar, as a baseline. Every page's markup has it, but not every page's stylesheet defines it — `kitap.css` does not, so the brand stacked and the logo sat on top of the wordmark. Defaults here, overridden by hers. */ [data-page] .bar { background: #011727; height: 84px; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; } [data-page] .bar .brand { display: flex; align-items: center; gap: 14px; } [data-page] .bar .brand img { width: 50px; height: 50px; display: block; } [data-page] .bar .word { font-family: 'Cormorant Garamond', Garamond, serif; font-size: 22px; font-weight: 500; letter-spacing: .22em; color: #F3EDE2; } [data-page] .bar nav { font-family: 'Open Sans', system-ui, sans-serif; font-size: 14px; letter-spacing: .16em; color: #C5AA6F; display: flex; gap: 36px; align-items: center; } [data-page] .bar nav a.giris { border: 1px solid #C5AA6F; color: #C5AA6F; padding: 9px 18px; } /* ── her sss → [data-page="sss"] ── */ [data-page="sss"]{margin:0;background:#FAF7F0;font-family:'EB Garamond',Georgia,serif;color:#011727} [data-page="sss"] .bar{background:#011727;height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between} [data-page="sss"] .brand{display:flex;align-items:center;gap:14px} [data-page="sss"] .brand img{width:50px;height:50px} [data-page="sss"] .word{font-family:'Cormorant Garamond';font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} [data-page="sss"] nav{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#C5AA6F;display:flex;gap:36px;align-items:center} [data-page="sss"] nav span.giris{border:1px solid #C5AA6F;color:#C5AA6F;padding:9px 18px} [data-page="sss"] .lab{font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#7C6853;max-width:900px;margin:40px auto 10px;padding:0 48px} [data-page="sss"] .eyebrow{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#86661C;margin-bottom:8px} [data-page="sss"] h1{font-family:'Cormorant Garamond';font-size:40px;font-weight:500;margin:0 0 8px} [data-page="sss"] .sub{font-family:'EB Garamond';font-style:italic;font-size:18px;color:#7C6853;margin:0 0 34px} [data-page="sss"] .btn{display:inline-block;background:#C5AA6F;color:#011727;padding:13px 26px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em} [data-page="sss"] .lnk{font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#4A1B2F;border-bottom:1px solid #C5AA6F;padding-bottom:2px} [data-page="sss"] .wrap{max-width:760px;margin:0 auto;padding:56px 48px 90px} [data-page="sss"] .q{border-top:1px solid #C9B99C;padding:22px 0} [data-page="sss"] .qq{font-family:'Cormorant Garamond';font-size:24px;font-weight:500;margin-bottom:8px} [data-page="sss"] .qa{font-size:17px;line-height:1.6;color:#554E4E} [data-page="sss"] .more{border-top:1px solid #C5AA6F;margin-top:10px;padding-top:26px;font-size:16.4px} /* ── her hakkinda → [data-page="hakkinda"] ── */ [data-page="hakkinda"]{margin:0;background:#4A1B2F;font-family:'EB Garamond',Georgia,serif;color:#232121} [data-page="hakkinda"] .bar{background:#011727;height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between} [data-page="hakkinda"] .word{font-family:'Cormorant Garamond';font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} [data-page="hakkinda"] nav{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#C5AA6F;display:flex;gap:36px;align-items:center} [data-page="hakkinda"] nav span.giris{border:1px solid #C5AA6F;color:#C5AA6F;padding:9px 18px} [data-page="hakkinda"] .paper{--u:calc(100cqw / 2283);container-type:inline-size;position:relative;isolation:isolate;width:min(860px,100% - 64px);margin:72px auto 96px;font-synthesis:none;font-kerning:normal} [data-page="hakkinda"] .leaf{position:absolute;inset:0;z-index:-1;border:solid transparent;border-width:calc(152.28 * var(--u)) 0; border-image:url(assets/hakkinda/paper-1400.webp) 3% 0 fill stretch;filter:drop-shadow(0 30px 40px rgba(20,4,10,.5))} [data-page="hakkinda"] .emblem{display:block;width:calc(586 * var(--u));height:auto;margin:calc(5.7 * var(--u)) auto 0} [data-page="hakkinda"] .e{font-family:'Cormorant',serif;font-weight:300;font-size:calc(50.0127 * var(--u));line-height:1;letter-spacing:.18em;padding-left:.18em;text-transform:uppercase;color:#7D6854;text-align:center;margin:calc(116.8 * var(--u)) 0 0} [data-page="hakkinda"] h1{font-family:'Cormorant',serif;font-weight:300;font-size:calc(129.2752 * var(--u));line-height:1;color:#232121;text-align:center;margin:calc(64.4 * var(--u)) 0 0} [data-page="hakkinda"] .sub{font-style:italic;font-size:calc(73.9525 * var(--u));line-height:1;color:#51182F;text-align:center;margin:calc(40.2 * var(--u)) 0 0} [data-page="hakkinda"] .intro{margin:calc(95.5 * var(--u)) calc(257.75 * var(--u)) 0} [data-page="hakkinda"] .intro p,[data-page="hakkinda"] section p{font-size:calc(54.0939 * var(--u));line-height:1.471;margin:0} [data-page="hakkinda"] .intro p{color:#232121} [data-page="hakkinda"] .intro p+p{margin-top:1.471em} [data-page="hakkinda"] .drop:first-letter{float:left;font-size:2.681em;line-height:.8;margin:.07em .15em 0 0;color:#232121} @supports (initial-letter:2) or (-webkit-initial-letter:2){ [data-page="hakkinda"] .drop:first-letter{float:none;font-size:inherit;line-height:inherit;margin:0 .4em 0 0;-webkit-initial-letter:2;initial-letter:2} } [data-page="hakkinda"] section h2{display:grid;grid-template-columns:minmax(0,calc(416.46 * var(--u))) minmax(max-content,calc(377 * var(--u))) minmax(0,calc(416.46 * var(--u)));justify-content:center;align-items:center; font-family:'Cormorant',serif;font-weight:300;font-size:calc(60 * var(--u));line-height:1;letter-spacing:.18em;text-transform:uppercase;color:#51182F;margin:calc(196 * var(--u)) 0 0} [data-page="hakkinda"] section h2:before,[data-page="hakkinda"] section h2:after{content:'';border-top:max(1px,calc(3 * var(--u))) solid #51182F} [data-page="hakkinda"] section h2 span{text-align:center;padding-left:.18em} [data-page="hakkinda"] section p{max-width:calc(1470 * var(--u));margin:calc(63.5 * var(--u)) auto 0;text-align:center;color:#000;text-wrap:pretty} [data-page="hakkinda"] section:nth-of-type(1) p{max-width:calc(1380 * var(--u))} [data-page="hakkinda"] section:nth-of-type(3) p{max-width:calc(1590 * var(--u))} [data-page="hakkinda"] .sign{display:flex;align-items:center;justify-content:space-between;margin:calc(209.4 * var(--u)) calc(215.7 * var(--u)) 0 calc(248.3 * var(--u));padding-bottom:calc(161 * var(--u))} [data-page="hakkinda"] .sign>div{margin-top:calc(47.4 * var(--u))} [data-page="hakkinda"] .sig{font-style:italic;font-size:calc(85.5028 * var(--u));line-height:1;color:#51172F} [data-page="hakkinda"] .date{font-size:calc(49.3176 * var(--u));line-height:1;letter-spacing:.2em;text-transform:uppercase;color:#7D6953;margin-top:calc(30.2 * var(--u))} [data-page="hakkinda"] .seal{display:block;flex:none;width:calc(344.4 * var(--u));height:auto} /* ── her iletisim → [data-page="iletisim"] ── */ [data-page="iletisim"]{margin:0;background:#FAF7F0;font-family:'EB Garamond',Georgia,serif;color:#011727} [data-page="iletisim"] .bar{background:#011727;height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between} [data-page="iletisim"] .brand{display:flex;align-items:center;gap:14px} [data-page="iletisim"] .brand img{width:50px;height:50px} [data-page="iletisim"] .word{font-family:'Cormorant Garamond';font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} [data-page="iletisim"] nav{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#C5AA6F;display:flex;gap:36px;align-items:center} [data-page="iletisim"] nav span.giris{border:1px solid #C5AA6F;color:#C5AA6F;padding:9px 18px} [data-page="iletisim"] .lab{font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#7C6853;max-width:900px;margin:40px auto 10px;padding:0 48px} [data-page="iletisim"] .eyebrow{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#86661C;margin-bottom:8px} [data-page="iletisim"] h1{font-family:'Cormorant Garamond';font-size:40px;font-weight:500;margin:0 0 8px} [data-page="iletisim"] .sub{font-family:'EB Garamond';font-style:italic;font-size:18px;color:#7C6853;margin:0 0 34px} [data-page="iletisim"] .btn{display:inline-block;background:#C5AA6F;color:#011727;padding:13px 26px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em} [data-page="iletisim"] .lnk{font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#4A1B2F;border-bottom:1px solid #C5AA6F;padding-bottom:2px} [data-page="iletisim"] .wrap{max-width:900px;margin:0 auto;padding:56px 48px 90px;display:grid;grid-template-columns:1fr 1fr;gap:56px} [data-page="iletisim"] .f{margin-bottom:14px} [data-page="iletisim"] .f label{display:block;font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#7C6853;margin-bottom:6px} [data-page="iletisim"] .f div{border:1px solid #C9B99C;background:#fff;padding:12px 14px;font-size:16.4px;color:#7C6853} [data-page="iletisim"] .f div.ta{height:110px} [data-page="iletisim"] .info p{font-size:17px;line-height:1.65;margin:0 0 18px} [data-page="iletisim"] .info b{font-family:'Open Sans';font-weight:600;font-size:12.8px;letter-spacing:.18em;color:#86661C;display:block;margin-bottom:4px} [data-page="iletisim"] .info .v{font-family:'EB Garamond';font-size:21px} /* ── her program → [data-page="program"] ── */ [data-page="program"]{margin:0;background:#FAF7F0;font-family:'EB Garamond',Georgia,serif;color:#011727} [data-page="program"] .bar{background:#011727;height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between} [data-page="program"] .word{font-family:'Cormorant Garamond';font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} [data-page="program"] nav{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#C5AA6F;display:flex;gap:36px;align-items:center} [data-page="program"] nav span.on{color:#F3EDE2} [data-page="program"] nav span.giris{border:1px solid #C5AA6F;color:#C5AA6F;padding:9px 18px} [data-page="program"] .head{max-width:960px;margin:0 auto;padding:56px 48px 30px;text-align:center} [data-page="program"] .eyebrow{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#86661C;margin-bottom:8px} [data-page="program"] .title{font-family:'Cormorant Garamond';font-size:38px;font-weight:500;margin:0} [data-page="program"] .sub{font-family:'EB Garamond';font-style:italic;font-size:18px;color:#7C6853;margin:8px 0 0} [data-page="program"] .case{max-width:1000px;margin:0 auto 80px;position:relative} [data-page="program"] .cornice{height:24px;background:linear-gradient(#8A5A32,#5E3A1C);border-radius:2px 2px 0 0} [data-page="program"] .cornice2{height:12px;margin:0 10px;background:linear-gradient(#6B4222,#4A2A12)} [data-page="program"] .dentils{height:10px;margin:0 16px;background:repeating-linear-gradient(90deg,#3A2210 0 8px,#7A4E2A 8px 18px)} [data-page="program"] .body{display:flex;background:#2A1A12} [data-page="program"] .col{width:46px;background:linear-gradient(90deg,#3E2414,#8A5A32 35%,#A9713F 50%,#7A4E2A 70%,#3E2414)} [data-page="program"] .inner{flex:1;background:radial-gradient(ellipse at 50% 20%,#3B2418,#1E120C 80%);box-shadow:inset 0 30px 40px rgba(0,0,0,.55)} [data-page="program"] .row{display:flex;justify-content:flex-start;align-items:flex-end;gap:8px;padding:34px 22px 0;min-height:190px;overflow:hidden} [data-page="program"] .shelf{height:14px;background:linear-gradient(#B07A45,#7A4E2A 60%,#4A2A12);box-shadow:0 4px 8px rgba(0,0,0,.5);position:relative} [data-page="program"] .shelf .tag{position:absolute;left:24px;top:-1px;transform:translateY(-100%);background:linear-gradient(#E8D08F,#B8923A);color:#3A2210;font-family:'Open Sans';font-size:8px;letter-spacing:.2em;padding:3px 10px;border:1px solid #7A5B1E} [data-page="program"] .plinth{height:26px;background:linear-gradient(#6B4222,#3E2414);margin:0 -8px;border-radius:0 0 3px 3px} [data-page="program"] .plinth2{height:8px;background:#2A1608;margin:0 -14px} [data-page="program"] .book{width:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px 6px;box-sizing:border-box;border-left:6px solid rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),4px 0 10px rgba(0,0,0,.45);cursor:pointer;transition:transform .3s;transform-origin:bottom center;color:#C5AA6F} [data-page="program"] .book:hover{transform:translateY(-10px)} [data-page="program"] .book.wide{width:100px} [data-page="program"] .frame{border:1px solid currentColor;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;box-sizing:border-box} [data-page="program"] .t{font-family:'Cormorant Garamond';font-weight:600;font-size:11.5px;letter-spacing:.06em;line-height:1.15;overflow-wrap:break-word;max-width:100%} [data-page="program"] .rule{width:14px;height:1px;background:currentColor;margin:6px 0} [data-page="program"] .a{font-family:'Cormorant Garamond';font-style:italic;font-size:11px;opacity:.85} [data-page="program"] .m{font-family:'Open Sans';font-size:6.5px;letter-spacing:.14em;margin-top:6px;opacity:.75} [data-page="program"] .film{width:34px;background:linear-gradient(#1a1a1a,#0c0c0c);border-left:4px solid #000;color:#C5AA6F;writing-mode:vertical-rl;transform:rotate(180deg);font-family:'Open Sans';font-size:7px;letter-spacing:.16em;display:flex;align-items:center;justify-content:center;padding:8px 0;box-shadow:4px 0 10px rgba(0,0,0,.45)} [data-page="program"] .theme{width:84px;background:#4A1B2F;color:#F3EDE2;border-left:0;box-shadow:none;padding:12px 8px} [data-page="program"] .theme .t{font-size:15.2px;letter-spacing:.14em} [data-page="program"] .divider{width:26px;height:120px;align-self:flex-end;margin:0 10px 0 0 !important;background:linear-gradient(#E8D08F,#B8923A);border:1px solid #7A5B1E;color:#3A2210;font-family:'Open Sans';font-size:7.5px;letter-spacing:.2em;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:center;margin:0 8px;box-shadow:2px 0 6px rgba(0,0,0,.4)} [data-page="program"] .shelf .tag.r{left:auto;right:24px} [data-page="program"] .theme .a{font-style:normal;font-size:12.8px;letter-spacing:.12em;font-family:'Open Sans'} [data-page="program"] .c1{background:linear-gradient(135deg,#365a48,#24402f)} [data-page="program"] .c2{background:linear-gradient(135deg,#5a2438,#3a1426)} [data-page="program"] .c3{background:linear-gradient(135deg,#5e5654,#3f3836)} [data-page="program"] .c4{background:linear-gradient(135deg,#0f2a40,#061a2b)} [data-page="program"] .c5{background:linear-gradient(135deg,#8a755d,#5e4c3c);color:#F3EDE2} [data-page="program"] .c6{background:linear-gradient(135deg,#6b4a1e,#4a3212)} [data-page="program"] .c7{background:linear-gradient(135deg,#2f3e5a,#1c2740)} [data-page="program"] .note{max-width:960px;margin:-40px auto 60px;text-align:center;font-family:'EB Garamond';font-style:italic;font-size:16.4px;color:#7C6853} /* ── her kutuphane → [data-page="kutuphane"] ── */ [data-page="kutuphane"]{margin:0;background:#FAF7F0;font-family:'EB Garamond',Georgia,serif;color:#011727} [data-page="kutuphane"] .bar{background:#011727;height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between} [data-page="kutuphane"] .word{font-family:'Cormorant Garamond';font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} [data-page="kutuphane"] nav{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#C5AA6F;display:flex;gap:36px;align-items:center} [data-page="kutuphane"] nav span.on{color:#F3EDE2} [data-page="kutuphane"] nav span.giris{border:1px solid #C5AA6F;color:#C5AA6F;padding:9px 18px} [data-page="kutuphane"] .wrap{max-width:1040px;margin:0 auto;padding:48px 48px 80px} [data-page="kutuphane"] .eyebrow{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#86661C;margin-bottom:6px} [data-page="kutuphane"] h1{font-family:'Cormorant Garamond';font-size:40px;font-weight:500;margin:0 0 6px} [data-page="kutuphane"] .sub{font-family:'EB Garamond';font-style:italic;font-size:18px;color:#7C6853;margin:0 0 30px} [data-page="kutuphane"] .tabs{display:flex;gap:0;border-bottom:1px solid #C5AA6F;margin-bottom:26px} [data-page="kutuphane"] .tabs span{font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;padding:12px 22px;color:#7C6853} [data-page="kutuphane"] .tabs span.on{color:#011727;border-bottom:2px solid #C5AA6F;margin-bottom:-1px} [data-page="kutuphane"] .filters{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap} [data-page="kutuphane"] .filters span{border:1px solid #C9B99C;padding:7px 12px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#554E4E} [data-page="kutuphane"] .filters span.on{background:#011727;color:#F3EDE2;border-color:#011727} [data-page="kutuphane"] .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:56px} [data-page="kutuphane"] .card{background:#F3EDE2;border:1px solid #E1D6C0;cursor:pointer;transition:transform .25s} [data-page="kutuphane"] .card:hover{transform:translateY(-4px)} [data-page="kutuphane"] .thumb{height:130px;background:#011727;display:flex;align-items:center;justify-content:center;position:relative} [data-page="kutuphane"] .thumb .play{width:40px;height:40px;border:1px solid #C5AA6F;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#C5AA6F;font-size:14px} [data-page="kutuphane"] .thumb .dur{position:absolute;right:10px;bottom:8px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.12em;color:#C5AA6F} [data-page="kutuphane"] .thumb .lock{position:absolute;left:10px;top:8px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.12em;color:#C5AA6F} [data-page="kutuphane"] .thumb.free{background:#4A1B2F} [data-page="kutuphane"] .thumb.free .lock{color:#F3EDE2} [data-page="kutuphane"] .cb{padding:14px 16px 16px} [data-page="kutuphane"] .cb b{font-family:'Open Sans';font-weight:600;font-size:12.8px;letter-spacing:.14em;color:#86661C;display:block;margin-bottom:4px} [data-page="kutuphane"] .cb .t{font-family:'Cormorant Garamond';font-size:20px;font-weight:500;line-height:1.15} [data-page="kutuphane"] .cb .a{font-family:'EB Garamond';font-style:italic;font-size:15.2px;color:#7C6853} [data-page="kutuphane"] .list{border-top:1px solid #C9B99C} [data-page="kutuphane"] .row{display:grid;grid-template-columns:110px 1fr 140px;gap:20px;padding:16px 4px;border-bottom:1px solid #E1D6C0;align-items:baseline} [data-page="kutuphane"] .row .d{font-family:'Open Sans';font-size:12.8px;letter-spacing:.12em;color:#7C6853} [data-page="kutuphane"] .row .t{font-family:'Cormorant Garamond';font-size:19px;font-weight:500} [data-page="kutuphane"] .row .k{font-family:'EB Garamond';font-style:italic;font-size:15.2px;color:#7C6853;margin-left:8px} [data-page="kutuphane"] .row .type{font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;text-align:right;color:#86661C} [data-page="kutuphane"] .row .type.lock{color:#7C6853} [data-page="kutuphane"] .more{text-align:center;margin-top:24px} [data-page="kutuphane"] .more span{border:1px solid #C5AA6F;padding:10px 20px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#4A1B2F} /* ── her takvim → [data-page="takvim"] ── */ [data-page="takvim"]{margin:0;background:#FAF7F0;font-family:'EB Garamond',Georgia,serif;color:#011727} [data-page="takvim"] .bar{background:#011727;height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between} [data-page="takvim"] .word{font-family:'Cormorant Garamond';font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} [data-page="takvim"] nav{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#C5AA6F;display:flex;gap:36px;align-items:center} [data-page="takvim"] nav span.on{color:#F3EDE2} [data-page="takvim"] nav span.giris{border:1px solid #C5AA6F;color:#C5AA6F;padding:9px 18px} [data-page="takvim"] .wrap{max-width:1040px;margin:0 auto;padding:48px 48px 80px} [data-page="takvim"] .top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px} [data-page="takvim"] .eyebrow{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#86661C;margin-bottom:6px} [data-page="takvim"] .month{font-family:'Cormorant Garamond';font-size:40px;font-weight:500;margin:0;line-height:1} [data-page="takvim"] .month small{font-family:'Open Sans';font-size:12.8px;letter-spacing:.3em;color:#7C6853;margin-left:14px;vertical-align:middle} [data-page="takvim"] .navm{display:flex;gap:10px} [data-page="takvim"] .navm span{border:1px solid #C5AA6F;padding:9px 16px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#4A1B2F} [data-page="takvim"] .grid{display:grid;grid-template-columns:2.2fr 1fr;gap:28px;align-items:start} [data-page="takvim"] table{width:100%;border-collapse:collapse;background:#F3EDE2;border:1px solid #C9B99C;box-shadow:0 20px 40px rgba(0,0,0,.12)} [data-page="takvim"] th{font-family:'Open Sans';font-size:12.8px;letter-spacing:.18em;font-weight:400;color:#7C6853;padding:12px 0 10px;border-bottom:1px solid #C9B99C} [data-page="takvim"] td{vertical-align:top;height:96px;width:14.28%;border-right:1px solid #E1D6C0;border-bottom:1px solid #E1D6C0;padding:8px} [data-page="takvim"] td:last-child{border-right:none} [data-page="takvim"] .d{font-family:'Cormorant Garamond';font-size:17px;color:#7C6853} [data-page="takvim"] td.mon .d{color:#011727;font-weight:600} [data-page="takvim"] .ev{margin-top:6px;padding:5px 7px;font-size:14px;line-height:1.3;border-left:2px solid #C5AA6F;background:#FAF7F0} [data-page="takvim"] .ev b{font-family:'Open Sans';font-weight:600;font-size:12.8px;letter-spacing:.12em;display:block;color:#86661C;margin-bottom:2px} [data-page="takvim"] .ev.salon{border-left-color:#4A1B2F} [data-page="takvim"] .ev.salon b{color:#4A1B2F} [data-page="takvim"] .ev.mektup{border-left-color:#011727} [data-page="takvim"] .ev.mektup b{color:#011727} [data-page="takvim"] .ev .lock{float:right;font-family:'Open Sans';font-size:12.8px;color:#7C6853} [data-page="takvim"] .side .box{background:#011727;color:#F3EDE2;padding:24px 22px;margin-bottom:18px} [data-page="takvim"] .side .box .eyebrow{color:#C5AA6F} [data-page="takvim"] .side h3{font-family:'Cormorant Garamond';font-size:24px;font-weight:500;margin:0 0 6px} [data-page="takvim"] .side p{font-size:15.2px;line-height:1.55;color:#D9C9A6;margin:0} [data-page="takvim"] .side .btn{display:inline-block;margin-top:14px;background:#C5AA6F;color:#011727;padding:10px 18px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em} [data-page="takvim"] .legend{font-size:15.2px;color:#554E4E;line-height:2} [data-page="takvim"] .legend i{display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:middle} /* ── her salon → [data-page="salon"] ── */ [data-page="salon"]{margin:0;background:#2E1020;font-family:'EB Garamond',Georgia,serif;color:#F3EDE2} [data-page="salon"] .bar{background:#011727;height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between} [data-page="salon"] .word{font-family:'Cormorant Garamond';font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} [data-page="salon"] nav{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#C5AA6F;display:flex;gap:36px;align-items:center} [data-page="salon"] nav span.giris{border:1px solid #C5AA6F;color:#C5AA6F;padding:9px 18px} [data-page="salon"] .hero{position:relative;height:620px;overflow:hidden} [data-page="salon"] .hero img{width:100%;height:100%;object-fit:cover;display:block} [data-page="salon"] .hero:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,16,32,.15) 0%,rgba(46,16,32,0) 35%,rgba(46,16,32,.55) 75%,#2E1020 100%)} [data-page="salon"] .hero .txt{position:absolute;left:0;right:0;bottom:56px;text-align:center;z-index:2} [data-page="salon"] .hero .eyebrow{font-family:'Open Sans';font-size:14px;letter-spacing:.3em;color:#C5AA6F;margin-bottom:12px} [data-page="salon"] .hero h1{font-family:'Cormorant Garamond';font-size:64px;font-weight:500;margin:0;line-height:1;text-shadow:0 4px 30px rgba(0,0,0,.6)} [data-page="salon"] .hero p{font-family:'EB Garamond';font-style:italic;font-size:24px;color:#E8DCC4;margin:12px 0 0} [data-page="salon"] .wrap{max-width:1000px;margin:0 auto;padding:64px 48px 90px} [data-page="salon"] .intro{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center;margin-bottom:72px} [data-page="salon"] .intro p{font-size:21px;line-height:1.6;color:#E8DCC4;margin:0 0 18px} [data-page="salon"] .intro .lead{font-family:'EB Garamond';font-size:32px;line-height:1.3;color:#F3EDE2} [data-page="salon"] .key{text-align:center} [data-page="salon"] .key svg{width:260px;height:150px} [data-page="salon"] .key .cap{font-family:'EB Garamond';font-style:italic;font-size:18px;color:#C5AA6F;margin-top:6px} [data-page="salon"] .ticket{display:grid;grid-template-columns:1fr 230px;max-width:840px;margin:0 auto 80px;background:#F3EDE2;color:#2E1020;position:relative;box-shadow:0 40px 60px rgba(0,0,0,.55);border-radius:6px;overflow:hidden; background-image:repeating-linear-gradient(0deg,rgba(120,90,60,.04) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(120,90,60,.03) 0 1px,transparent 1px 4px)} [data-page="salon"] .ticket:before,[data-page="salon"] .ticket:after{content:'';position:absolute;width:24px;height:24px;border-radius:50%;background:#2E1020;top:50%;margin-top:-12px;z-index:2} [data-page="salon"] .ticket:before{left:-12px} [data-page="salon"] .ticket:after{right:-12px} [data-page="salon"] .tl{padding:38px 44px 34px;border-right:2px dashed rgba(46,16,32,.4);position:relative} [data-page="salon"] .tl:before{content:'';position:absolute;inset:12px;border:1px solid #B8923A;pointer-events:none} [data-page="salon"] .tl .e{font-family:'Cormorant Garamond';font-size:15.2px;letter-spacing:.42em;color:#7C6853;margin-bottom:14px} [data-page="salon"] .tl h2{font-family:'Cormorant Garamond';font-size:44px;font-weight:500;margin:0;line-height:1;letter-spacing:.02em;text-shadow:0 1px 0 rgba(255,255,255,.6)} [data-page="salon"] .tl .k{font-family:'EB Garamond';font-style:italic;font-size:21px;color:#4A1B2F;margin:8px 0 18px} [data-page="salon"] .tl .meta{font-family:'EB Garamond';font-size:16.4px;letter-spacing:.2em;color:#554E4E;line-height:2} [data-page="salon"] .tl .hand{font-family:'Homemade Apple';font-size:15.2px;color:#4A1B2F;margin-top:14px;transform:rotate(-1.5deg)} [data-page="salon"] .tr{padding:30px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;position:relative} [data-page="salon"] .tr:before{content:'';position:absolute;inset:12px;border:1px solid #B8923A;pointer-events:none} [data-page="salon"] .seal{width:70px;height:70px;border-radius:50%;background:#4A1B2F;box-shadow:0 4px 10px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center} [data-page="salon"] .seal img{width:60px;height:60px} [data-page="salon"] .tr .price{font-family:'Cormorant Garamond';font-size:32px;font-weight:500;color:#2E1020;line-height:1} [data-page="salon"] .tr .price small{display:block;font-size:14px;letter-spacing:.3em;color:#7C6853;margin-top:4px} [data-page="salon"] .tr .btn{display:block;background:#2E1020;color:#F3EDE2;padding:12px 18px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;width:100%;box-sizing:border-box} [data-page="salon"] .tr .left{font-family:'Cormorant Garamond';font-size:14px;letter-spacing:.24em;color:#4A1B2F;border:1px solid #4A1B2F;padding:4px 10px} [data-page="salon"] .galh{font-family:'Cormorant Garamond';font-size:30px;font-weight:500;text-align:center;margin:0 0 20px} [data-page="salon"] .gal{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:240px 240px;gap:12px} [data-page="salon"] .gal div{background:#1E0A15;border:1px solid rgba(197, 170, 111,.25);overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#7A5B6A} [data-page="salon"] .gal img{width:100%;height:100%;object-fit:cover;display:block} [data-page="salon"] .gal .big{grid-row:span 2} /* ── her odeme → [data-page="uyelik"] ── */ [data-page="uyelik"]{margin:0;background:#FAF7F0;font-family:'EB Garamond',Georgia,serif;color:#011727} [data-page="uyelik"] .bar{background:#011727;height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between} [data-page="uyelik"] .brand{display:flex;align-items:center;gap:14px} [data-page="uyelik"] .brand img{width:50px;height:50px} [data-page="uyelik"] .word{font-family:'Cormorant Garamond';font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} [data-page="uyelik"] .bar .step{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#C5AA6F} [data-page="uyelik"] .lab{font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#7C6853;max-width:1000px;margin:40px auto 10px;padding:0 48px} [data-page="uyelik"] .wrap{max-width:1000px;margin:0 auto 70px;padding:0 48px;display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start} [data-page="uyelik"] .card{background:#F3EDE2;border:1px solid #C5AA6F;outline:1px solid #C5AA6F;outline-offset:-6px;padding:30px 28px;position:relative} [data-page="uyelik"] .card .badge{width:60px;height:60px;display:block;margin:0 auto 12px} [data-page="uyelik"] .card .tag{font-family:'Open Sans';font-size:12.8px;letter-spacing:.18em;color:#7C6853;text-align:center} [data-page="uyelik"] .card .name{font-family:'Cormorant Garamond';font-size:30px;font-weight:500;text-align:center;margin:6px 0 2px} [data-page="uyelik"] .card .line{font-family:'EB Garamond';font-style:italic;font-size:16.4px;color:#4A1B2F;text-align:center;margin-bottom:16px} [data-page="uyelik"] .card .inc{font-size:16.4px;line-height:1.7;color:#554E4E;border-top:1px dashed #C9B99C;padding-top:14px} [data-page="uyelik"] .card .price{font-family:'Cormorant Garamond';font-size:30px;text-align:center;margin-top:16px;padding-top:14px;border-top:1px dashed #C9B99C} [data-page="uyelik"] .card .price small{font-size:15.2px;color:#7C6853} [data-page="uyelik"] .card .fine{font-size:15.2px;color:#7C6853;text-align:center;margin-top:6px;line-height:1.5} [data-page="uyelik"] .form h2{font-family:'Cormorant Garamond';font-size:32px;font-weight:500;margin:0 0 6px} [data-page="uyelik"] .form p{font-size:16.4px;color:#554E4E;margin:0 0 22px;line-height:1.55} [data-page="uyelik"] .f{margin-bottom:14px} [data-page="uyelik"] .f label{display:block;font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#7C6853;margin-bottom:6px} [data-page="uyelik"] .f div{border:1px solid #C9B99C;background:#fff;padding:12px 14px;font-size:16.4px;color:#7C6853} [data-page="uyelik"] .pay{border:1px dashed #C5AA6F;padding:24px;text-align:center;font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#86661C;margin:20px 0} [data-page="uyelik"] .btn{display:block;text-align:center;background:#C5AA6F;color:#011727;padding:15px;font-family:'Open Sans';font-size:14px;letter-spacing:.16em} [data-page="uyelik"] .legal{font-size:15.2px;color:#7C6853;line-height:1.5;margin-top:12px} [data-page="uyelik"] .legal u{text-decoration:none;border-bottom:1px solid #C5AA6F} [data-page="uyelik"] .welcome{background:#011727;color:#F3EDE2;padding:80px 48px 90px;text-align:center} [data-page="uyelik"] .welcome .seal{width:88px;height:88px;border-radius:50%;background:#4A1B2F;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;box-shadow:0 6px 14px rgba(0,0,0,.5)} [data-page="uyelik"] .welcome .seal img{width:76px;height:76px} [data-page="uyelik"] .welcome .e{font-family:'Open Sans';font-size:12.8px;letter-spacing:.3em;color:#C5AA6F;margin-bottom:12px} [data-page="uyelik"] .welcome h1{font-family:'Cormorant Garamond';font-size:50px;font-weight:500;margin:0 0 10px;line-height:1.05} [data-page="uyelik"] .welcome p{font-family:'EB Garamond';font-size:21px;color:#D9C9A6;margin:0 0 34px} [data-page="uyelik"] .welcome .three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:0 auto 34px;text-align:left} [data-page="uyelik"] .welcome .three div{border:1px solid #1E3040;padding:20px 22px} [data-page="uyelik"] .welcome .three b{font-family:'Open Sans';font-weight:600;font-size:12.8px;letter-spacing:.16em;color:#C5AA6F;display:block;margin-bottom:6px} [data-page="uyelik"] .welcome .three span{font-family:'Cormorant Garamond';font-size:19px} [data-page="uyelik"] .welcome .three i{display:block;font-style:normal;font-size:15.2px;color:#9FB0C2;margin-top:4px} [data-page="uyelik"] .welcome .btn{display:inline-block;width:auto;padding:14px 30px} [data-page="uyelik"] .welcome .hand{font-family:'Homemade Apple';font-size:16.4px;color:#C5AA6F;margin-top:26px} [data-page="uyelik"] .env{margin-top:22px;background:#FFFEFA;position:relative;padding:108px 26px 26px;text-align:center;box-shadow:0 18px 36px rgba(0,0,0,.14);border:1px solid #E1D6C0; background-image:repeating-linear-gradient(0deg,rgba(120,90,60,.03) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(120,90,60,.025) 0 1px,transparent 1px 4px)} [data-page="uyelik"] .env:before{content:'';position:absolute;left:0;right:0;top:0;height:0;border-left:195px solid transparent;border-right:195px solid transparent;border-top:66px solid #F3EDE2} [data-page="uyelik"] .env .seal2{position:absolute;top:44px;left:50%;transform:translateX(-50%);width:46px;height:46px;border-radius:50%;background:#4A1B2F;box-shadow:0 3px 6px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:2} [data-page="uyelik"] .env .seal2 img{width:40px;height:40px} [data-page="uyelik"] .env .free{font-family:'Cormorant Garamond';font-size:30px;font-weight:500;color:#011727;margin:6px 0 2px} [data-page="uyelik"] .env .tag2{font-family:'Open Sans';font-size:12.8px;letter-spacing:.24em;color:#86661C} [data-page="uyelik"] .env .line2{font-family:'Cormorant Garamond';font-style:italic;font-size:16.4px;color:#7C6853;margin:8px 0 14px;line-height:1.5} [data-page="uyelik"] .env .fld{display:flex;max-width:300px;margin:0 auto} [data-page="uyelik"] .env .fld span{flex:1;border:1px solid #C9B99C;border-right:none;background:#fff;padding:10px 12px;font-size:15.2px;color:#7C6853;text-align:left} [data-page="uyelik"] .env .fld b{background:#4A1B2F;color:#F3EDE2;padding:10px 16px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;font-weight:600;display:flex;align-items:center} /* ── her odeme → [data-page="hosgeldiniz"] ── */ [data-page="hosgeldiniz"]{margin:0;background:#FAF7F0;font-family:'EB Garamond',Georgia,serif;color:#011727} [data-page="hosgeldiniz"] .bar{background:#011727;height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between} [data-page="hosgeldiniz"] .brand{display:flex;align-items:center;gap:14px} [data-page="hosgeldiniz"] .brand img{width:50px;height:50px} [data-page="hosgeldiniz"] .word{font-family:'Cormorant Garamond';font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} [data-page="hosgeldiniz"] .bar .step{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#C5AA6F} [data-page="hosgeldiniz"] .lab{font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#7C6853;max-width:1000px;margin:40px auto 10px;padding:0 48px} [data-page="hosgeldiniz"] .wrap{max-width:1000px;margin:0 auto 70px;padding:0 48px;display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start} [data-page="hosgeldiniz"] .card{background:#F3EDE2;border:1px solid #C5AA6F;outline:1px solid #C5AA6F;outline-offset:-6px;padding:30px 28px;position:relative} [data-page="hosgeldiniz"] .card .badge{width:60px;height:60px;display:block;margin:0 auto 12px} [data-page="hosgeldiniz"] .card .tag{font-family:'Open Sans';font-size:12.8px;letter-spacing:.18em;color:#7C6853;text-align:center} [data-page="hosgeldiniz"] .card .name{font-family:'Cormorant Garamond';font-size:30px;font-weight:500;text-align:center;margin:6px 0 2px} [data-page="hosgeldiniz"] .card .line{font-family:'EB Garamond';font-style:italic;font-size:16.4px;color:#4A1B2F;text-align:center;margin-bottom:16px} [data-page="hosgeldiniz"] .card .inc{font-size:16.4px;line-height:1.7;color:#554E4E;border-top:1px dashed #C9B99C;padding-top:14px} [data-page="hosgeldiniz"] .card .price{font-family:'Cormorant Garamond';font-size:30px;text-align:center;margin-top:16px;padding-top:14px;border-top:1px dashed #C9B99C} [data-page="hosgeldiniz"] .card .price small{font-size:15.2px;color:#7C6853} [data-page="hosgeldiniz"] .card .fine{font-size:15.2px;color:#7C6853;text-align:center;margin-top:6px;line-height:1.5} [data-page="hosgeldiniz"] .form h2{font-family:'Cormorant Garamond';font-size:32px;font-weight:500;margin:0 0 6px} [data-page="hosgeldiniz"] .form p{font-size:16.4px;color:#554E4E;margin:0 0 22px;line-height:1.55} [data-page="hosgeldiniz"] .f{margin-bottom:14px} [data-page="hosgeldiniz"] .f label{display:block;font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#7C6853;margin-bottom:6px} [data-page="hosgeldiniz"] .f div{border:1px solid #C9B99C;background:#fff;padding:12px 14px;font-size:16.4px;color:#7C6853} [data-page="hosgeldiniz"] .pay{border:1px dashed #C5AA6F;padding:24px;text-align:center;font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#86661C;margin:20px 0} [data-page="hosgeldiniz"] .btn{display:block;text-align:center;background:#C5AA6F;color:#011727;padding:15px;font-family:'Open Sans';font-size:14px;letter-spacing:.16em} [data-page="hosgeldiniz"] .legal{font-size:15.2px;color:#7C6853;line-height:1.5;margin-top:12px} [data-page="hosgeldiniz"] .legal u{text-decoration:none;border-bottom:1px solid #C5AA6F} [data-page="hosgeldiniz"] .welcome{background:#011727;color:#F3EDE2;padding:80px 48px 90px;text-align:center} [data-page="hosgeldiniz"] .welcome .seal{width:88px;height:88px;border-radius:50%;background:#4A1B2F;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;box-shadow:0 6px 14px rgba(0,0,0,.5)} [data-page="hosgeldiniz"] .welcome .seal img{width:76px;height:76px} [data-page="hosgeldiniz"] .welcome .e{font-family:'Open Sans';font-size:12.8px;letter-spacing:.3em;color:#C5AA6F;margin-bottom:12px} [data-page="hosgeldiniz"] .welcome h1{font-family:'Cormorant Garamond';font-size:50px;font-weight:500;margin:0 0 10px;line-height:1.05} [data-page="hosgeldiniz"] .welcome p{font-family:'EB Garamond';font-size:21px;color:#D9C9A6;margin:0 0 34px} [data-page="hosgeldiniz"] .welcome .three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:0 auto 34px;text-align:left} [data-page="hosgeldiniz"] .welcome .three div{border:1px solid #1E3040;padding:20px 22px} [data-page="hosgeldiniz"] .welcome .three b{font-family:'Open Sans';font-weight:600;font-size:12.8px;letter-spacing:.16em;color:#C5AA6F;display:block;margin-bottom:6px} [data-page="hosgeldiniz"] .welcome .three span{font-family:'Cormorant Garamond';font-size:19px} [data-page="hosgeldiniz"] .welcome .three i{display:block;font-style:normal;font-size:15.2px;color:#9FB0C2;margin-top:4px} [data-page="hosgeldiniz"] .welcome .btn{display:inline-block;width:auto;padding:14px 30px} [data-page="hosgeldiniz"] .welcome .hand{font-family:'Homemade Apple';font-size:16.4px;color:#C5AA6F;margin-top:26px} [data-page="hosgeldiniz"] .env{margin-top:22px;background:#FFFEFA;position:relative;padding:108px 26px 26px;text-align:center;box-shadow:0 18px 36px rgba(0,0,0,.14);border:1px solid #E1D6C0; background-image:repeating-linear-gradient(0deg,rgba(120,90,60,.03) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(120,90,60,.025) 0 1px,transparent 1px 4px)} [data-page="hosgeldiniz"] .env:before{content:'';position:absolute;left:0;right:0;top:0;height:0;border-left:195px solid transparent;border-right:195px solid transparent;border-top:66px solid #F3EDE2} [data-page="hosgeldiniz"] .env .seal2{position:absolute;top:44px;left:50%;transform:translateX(-50%);width:46px;height:46px;border-radius:50%;background:#4A1B2F;box-shadow:0 3px 6px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:2} [data-page="hosgeldiniz"] .env .seal2 img{width:40px;height:40px} [data-page="hosgeldiniz"] .env .free{font-family:'Cormorant Garamond';font-size:30px;font-weight:500;color:#011727;margin:6px 0 2px} [data-page="hosgeldiniz"] .env .tag2{font-family:'Open Sans';font-size:12.8px;letter-spacing:.24em;color:#86661C} [data-page="hosgeldiniz"] .env .line2{font-family:'Cormorant Garamond';font-style:italic;font-size:16.4px;color:#7C6853;margin:8px 0 14px;line-height:1.5} [data-page="hosgeldiniz"] .env .fld{display:flex;max-width:300px;margin:0 auto} [data-page="hosgeldiniz"] .env .fld span{flex:1;border:1px solid #C9B99C;border-right:none;background:#fff;padding:10px 12px;font-size:15.2px;color:#7C6853;text-align:left} [data-page="hosgeldiniz"] .env .fld b{background:#4A1B2F;color:#F3EDE2;padding:10px 16px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;font-weight:600;display:flex;align-items:center} /* ── her uye → [data-page="uye"] ── */ [data-page="uye"]{margin:0;background:#FAF7F0;font-family:'EB Garamond',Georgia,serif;color:#011727} [data-page="uye"] .bar{background:#011727;height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between} [data-page="uye"] .word{font-family:'Cormorant Garamond';font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} [data-page="uye"] nav{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#C5AA6F;display:flex;gap:36px;align-items:center} [data-page="uye"] nav span.on{color:#F3EDE2} [data-page="uye"] nav .me{display:flex;align-items:center;gap:10px;color:#F3EDE2;border:1px solid #C5AA6F;padding:7px 14px} [data-page="uye"] nav .me i{width:20px;height:20px;border-radius:50%;background:#C5AA6F;display:inline-block} [data-page="uye"] .wrap{max-width:1040px;margin:0 auto;padding:44px 48px 80px} [data-page="uye"] .hello{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px} [data-page="uye"] .hello h1{font-family:'Cormorant Garamond';font-size:36px;font-weight:500;margin:0} [data-page="uye"] .hello .st{font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#7C6853} [data-page="uye"] .grid{display:grid;grid-template-columns:1.5fr 1fr;align-items:stretch;gap:20px;margin-bottom:20px} [data-page="uye"] .now{background:#011727;color:#F3EDE2;padding:32px 34px;position:relative} [data-page="uye"] .now .e{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#C5AA6F;margin-bottom:10px} [data-page="uye"] .now h2{font-family:'Cormorant Garamond';font-size:34px;font-weight:500;margin:0 0 6px;line-height:1.05} [data-page="uye"] .now .k{font-family:'EB Garamond';font-style:italic;font-size:17px;color:#D9C9A6;margin-bottom:22px} [data-page="uye"] .now .btn{display:inline-block;background:#C5AA6F;color:#011727;padding:12px 24px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;margin-right:14px} [data-page="uye"] .now .lnk{font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#F3EDE2;border-bottom:1px solid #C5AA6F;padding-bottom:3px} [data-page="uye"] .now .count{position:absolute;right:34px;top:32px;text-align:right} [data-page="uye"] .now .count b{display:block;font-family:'Cormorant Garamond';font-size:40px;font-weight:500;line-height:1} [data-page="uye"] .now .count span{font-family:'Open Sans';font-size:12.8px;letter-spacing:.18em;color:#C5AA6F} [data-page="uye"] .card{background:#F3EDE2;border:1px solid #E1D6C0;padding:24px 26px} [data-page="uye"] .card .e{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#86661C;margin-bottom:10px} [data-page="uye"] .card h3{font-family:'Cormorant Garamond';font-size:24px;font-weight:500;margin:0 0 8px} [data-page="uye"] .card p{font-size:16.4px;line-height:1.55;color:#554E4E;margin:0 0 12px} [data-page="uye"] .card .lnk{font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#4A1B2F;border-bottom:1px solid #C5AA6F;padding-bottom:2px} [data-page="uye"] .three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} [data-page="uye"] .book{display:flex;gap:16px;align-items:center} [data-page="uye"] .book .c{width:56px;height:80px;background:linear-gradient(135deg,#5a2438,#3a1426);border-left:4px solid #2a0e1c;flex:none} [data-page="uye"] .forum .msg{border-top:1px solid #E1D6C0;padding:10px 0;font-size:15.2px;line-height:1.45} [data-page="uye"] .forum .msg b{font-family:'Open Sans';font-weight:600;font-size:12.8px;letter-spacing:.12em;color:#7C6853;display:block;margin-bottom:2px} [data-page="uye"] .recs .r{display:flex;gap:12px;align-items:center;border-top:1px solid #E1D6C0;padding:10px 0;font-size:15.2px} [data-page="uye"] .recs .r i{width:34px;height:24px;background:#011727;flex:none;display:flex;align-items:center;justify-content:center;color:#C5AA6F;font-size:12.8px} [data-page="uye"] .foot{margin-top:28px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#7C6853;display:flex;gap:26px} [data-page="uye"] .now{background:#F3EDE2;color:#011727;padding:0;border:none;position:relative;box-shadow:0 24px 40px rgba(0,0,0,.25)} [data-page="uye"] .now:before{content:'';position:absolute;left:50%;top:-10px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#C5AA6F} [data-page="uye"] .now .top{border-bottom:1px dashed #C9B99C;padding:22px 30px 14px;text-align:center} [data-page="uye"] .now .top .m{font-family:'Cormorant Garamond';font-size:14px;letter-spacing:.32em;color:#7C6853} [data-page="uye"] .now .top .d{font-family:'Cormorant Garamond';font-size:64px;font-weight:500;line-height:1;margin:6px 0 2px} [data-page="uye"] .now .top .w{font-family:'Open Sans';font-size:12.8px;letter-spacing:.24em;color:#86661C} [data-page="uye"] .now .body{padding:22px 30px 28px;text-align:center} [data-page="uye"] .now h2{font-family:'Cormorant Garamond';font-size:30px;font-weight:500;margin:0 0 6px;line-height:1.05;color:#011727} [data-page="uye"] .now .k{font-family:'EB Garamond';font-style:italic;font-size:17px;color:#4A1B2F;margin-bottom:18px} [data-page="uye"] .now .btn{display:inline-block;background:#C5AA6F;color:#011727;padding:12px 24px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;margin-right:14px} [data-page="uye"] .now .lnk{font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#011727;border-bottom:1px solid #C5AA6F;padding-bottom:3px} [data-page="uye"] .now .e,[data-page="uye"] .now .count{display:none} [data-page="uye"] .cover{width:118px;height:170px;background:linear-gradient(135deg,#5e5654,#3f3836);border-left:8px solid rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),6px 8px 18px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;color:#C5AA6F;text-align:center;padding:12px;box-sizing:border-box;flex:none} [data-page="uye"] .cover .f{border:1px solid #C5AA6F;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;box-sizing:border-box} [data-page="uye"] .cover .t{font-family:'Cormorant Garamond';font-weight:600;font-size:16.4px;letter-spacing:.1em} [data-page="uye"] .cover .r{width:16px;height:1px;background:#C5AA6F;margin:8px 0} [data-page="uye"] .cover .a{font-family:'Cormorant Garamond';font-style:italic;font-size:14px;color:#D9C9A6} [data-page="uye"] .sofra{position:relative;overflow:hidden;color:#F3EDE2;border:1px solid #C5AA6F;background:#2E1020} [data-page="uye"] .sofra img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;filter:saturate(.8)} [data-page="uye"] .sofra:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,16,32,.2),rgba(46,16,32,.85))} [data-page="uye"] .sofra > *:not(img){position:relative;z-index:2} [data-page="uye"] .sofra .e{color:#C5AA6F} [data-page="uye"] .sofra h3{color:#F3EDE2} [data-page="uye"] .sofra p{color:#E8DCC4} [data-page="uye"] .sofra .lnk{color:#F3EDE2} /* ── her forum → [data-page="forum"] ── */ [data-page="forum"]{margin:0;background:#FFFFFF;font-family:'EB Garamond',Georgia,serif;color:#011727} [data-page="forum"] .bar{background:#011727;height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between} [data-page="forum"] .brand{display:flex;align-items:center;gap:14px} [data-page="forum"] .brand img{width:50px;height:50px} [data-page="forum"] .word{font-family:'Cormorant Garamond';font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} [data-page="forum"] nav{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#C5AA6F;display:flex;gap:36px;align-items:center} [data-page="forum"] nav span.on{color:#F3EDE2} [data-page="forum"] nav .me{color:#F3EDE2;border:1px solid #C5AA6F;padding:9px 18px} [data-page="forum"] .layout{display:grid;grid-template-columns:240px 1fr 250px;gap:0} [data-page="forum"] .main{padding:36px 40px 80px} [data-page="forum"] .right{padding:36px 40px 80px 0} [data-page="forum"] .right .box{margin-bottom:12px} [data-page="forum"] .side{background:#011727;padding:32px 0 60px;min-height:calc(100vh - 84px)} [data-page="forum"] .side .h{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#C5AA6F;margin:0 0 10px;padding:0 26px} [data-page="forum"] .side .s{font-family:'Cormorant Garamond';font-size:18px;padding:10px 26px;color:#9FB0C2;display:flex;justify-content:space-between;align-items:center} [data-page="forum"] .side .s.on{background:#4A1B2F;color:#fff;border-left:3px solid #C5AA6F} [data-page="forum"] .side .s b{font-family:'Open Sans';font-size:12.8px;color:#011727;background:#C5AA6F;border-radius:10px;padding:2px 7px;font-weight:600} [data-page="forum"] .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px} [data-page="forum"] .top h1{font-family:'Cormorant Garamond';font-size:32px;font-weight:500;margin:0;color:#011727} [data-page="forum"] .top .btn{background:#4A1B2F;color:#fff;padding:10px 18px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em} [data-page="forum"] .desc{font-family:'EB Garamond';font-style:italic;font-size:16.4px;color:#6B6B6B;margin:0 0 18px} [data-page="forum"] .tabs{display:flex;gap:22px;border-bottom:1px solid #E5E5E5;margin-bottom:16px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#8A8A8A} [data-page="forum"] .tabs span{padding:8px 0} [data-page="forum"] .tabs span.on{color:#011727;border-bottom:2px solid #4A1B2F;margin-bottom:-1px} [data-page="forum"] .card{background:#fff;border:1px solid #E5E5E5;padding:20px 24px;margin-bottom:12px} [data-page="forum"] .card.pin{border-left:3px solid #4A1B2F} [data-page="forum"] .card .who{display:flex;align-items:center;gap:10px;margin-bottom:10px} [data-page="forum"] .av{width:32px;height:32px;border-radius:50%;background:#011727;color:#fff;font-family:'Cormorant Garamond';font-size:16.4px;display:flex;align-items:center;justify-content:center} [data-page="forum"] .av.y{background:#4A1B2F} [data-page="forum"] .nm{font-family:'Cormorant Garamond';font-size:17px;font-weight:500} [data-page="forum"] .nm small{font-family:'Open Sans';font-size:12.8px;letter-spacing:.12em;color:#8A8A8A;margin-left:8px} [data-page="forum"] .tag{font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#4A1B2F;border:1px solid #4A1B2F;padding:2px 6px;margin-left:6px} [data-page="forum"] .pinl{font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#4A1B2F;margin-left:auto} [data-page="forum"] .card h3{font-family:'Cormorant Garamond';font-size:23px;font-weight:500;margin:0 0 6px} [data-page="forum"] .card p{margin:0 0 12px;font-size:16.4px;line-height:1.55;color:#2A2A2A} [data-page="forum"] .act{font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#8A8A8A;display:flex;gap:18px} [data-page="forum"] .act i{font-style:normal;color:#4A1B2F;margin-right:4px} [data-page="forum"] .right .box{border:1px solid #E5E5E5;padding:18px 20px;margin-bottom:14px} [data-page="forum"] .right .box.navy{background:#011727;color:#fff;border-color:#011727} [data-page="forum"] .right .h{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#4A1B2F;margin:0 0 8px} [data-page="forum"] .right .navy .h{color:#C5AA6F} [data-page="forum"] .right .t{font-family:'Cormorant Garamond';font-size:19px;font-weight:500} [data-page="forum"] .right .k{font-size:15.2px;color:#6B6B6B;line-height:1.5} [data-page="forum"] .right .navy .k{color:#D9C9A6} [data-page="forum"] .right .cov{width:48px;height:68px;background:#4A1B2F;border-left:4px solid #2E1020;float:left;margin:0 10px 4px 0} [data-page="forum"] .right .lnk{font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#4A1B2F;border-bottom:1px solid #4A1B2F;padding-bottom:2px;display:inline-block;margin-top:8px} [data-page="forum"] .right .rules{font-family:'EB Garamond';font-style:italic;font-size:15.2px;color:#6B6B6B;line-height:1.5} /* ── her kitap → [data-page="kitap"] ── */ [data-page="kitap"]{margin:0;background:#FAF7F0;font-family:'EB Garamond',Georgia,serif;color:#011727} [data-page="kitap"] .bar{background:#011727;height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between} [data-page="kitap"] .word{font-family:'Cormorant Garamond';font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} [data-page="kitap"] nav{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#C5AA6F;display:flex;gap:36px;align-items:center} [data-page="kitap"] nav span.on{color:#F3EDE2} [data-page="kitap"] nav span.giris{border:1px solid #C5AA6F;color:#C5AA6F;padding:9px 18px} [data-page="kitap"] .crumb{max-width:1000px;margin:0 auto;padding:22px 48px 0;font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#7C6853} [data-page="kitap"] .head{max-width:1000px;margin:0 auto;padding:28px 48px 48px;display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:start} [data-page="kitap"] .cover{width:240px;height:340px;background:linear-gradient(135deg,#2f3e5a,#1c2740);border-left:10px solid #0f1830;box-shadow:12px 18px 40px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;color:#C5AA6F;text-align:center;padding:20px;box-sizing:border-box} [data-page="kitap"] .cover .f{border:1px solid #C5AA6F;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px} [data-page="kitap"] .cover .t{font-family:'Cormorant Garamond';font-weight:600;font-size:24px;letter-spacing:.14em} [data-page="kitap"] .cover .r{width:22px;height:1px;background:#C5AA6F;margin:12px 0} [data-page="kitap"] .cover .a{font-family:'Cormorant Garamond';font-style:italic;font-size:16.4px;color:#D9C9A6} [data-page="kitap"] .eyebrow{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#86661C;margin-bottom:8px} [data-page="kitap"] h1{font-family:'Cormorant Garamond';font-size:52px;font-weight:500;margin:0;line-height:1} [data-page="kitap"] .auth{font-family:'Cormorant Garamond';font-style:italic;font-size:24px;color:#4A1B2F;margin:8px 0 22px} [data-page="kitap"] .lead{font-size:19px;line-height:1.65;margin:0 0 16px} [data-page="kitap"] .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px;padding-top:18px;border-top:1px solid #C5AA6F} [data-page="kitap"] .meta b{font-family:'Open Sans';font-weight:600;font-size:12.8px;letter-spacing:.16em;color:#86661C;display:block;margin-bottom:4px} [data-page="kitap"] .meta span{font-family:'EB Garamond';font-size:17px} [data-page="kitap"] .sec{max-width:1000px;margin:0 auto;padding:0 48px 56px} [data-page="kitap"] h2{font-family:'Cormorant Garamond';font-size:28px;font-weight:500;margin:0 0 18px;padding-top:40px;border-top:1px solid #C5AA6F} [data-page="kitap"] .tl{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} [data-page="kitap"] .tl div{background:#F3EDE2;border:1px solid #E1D6C0;padding:16px} [data-page="kitap"] .tl b{font-family:'Open Sans';font-weight:600;font-size:12.8px;letter-spacing:.16em;color:#86661C;display:block;margin-bottom:6px} [data-page="kitap"] .tl .t{font-family:'Cormorant Garamond';font-size:19px;font-weight:500;margin-bottom:4px} [data-page="kitap"] .tl p{font-size:15.2px;line-height:1.5;color:#554E4E;margin:0} [data-page="kitap"] .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px} [data-page="kitap"] .rec{background:#011727;color:#F3EDE2;padding:0;border:1px solid #1E3040} [data-page="kitap"] .rec .thumb{height:170px;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(ellipse at 50% 40%,#1a2f45,#011727 70%)} [data-page="kitap"] .rec .play{width:48px;height:48px;border:1px solid #C5AA6F;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#C5AA6F} [data-page="kitap"] .rec .lock{position:absolute;left:12px;top:10px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#C5AA6F} [data-page="kitap"] .rec .b{padding:14px 18px 18px} [data-page="kitap"] .rec .b b{font-family:'Open Sans';font-weight:600;font-size:12.8px;letter-spacing:.14em;color:#C5AA6F;display:block;margin-bottom:4px} [data-page="kitap"] .rec .b .t{font-family:'Cormorant Garamond';font-size:21px;font-weight:500} [data-page="kitap"] .rec .b .a{font-family:'EB Garamond';font-style:italic;font-size:15.2px;color:#D9C9A6} [data-page="kitap"] .list{border-top:1px solid #C9B99C} [data-page="kitap"] .row{display:grid;grid-template-columns:110px 1fr 120px;gap:20px;padding:14px 4px;border-bottom:1px solid #E1D6C0;align-items:baseline} [data-page="kitap"] .row .d{font-family:'Open Sans';font-size:12.8px;letter-spacing:.12em;color:#7C6853} [data-page="kitap"] .row .t{font-family:'Cormorant Garamond';font-size:19px;font-weight:500} [data-page="kitap"] .row .k{font-family:'EB Garamond';font-style:italic;font-size:15.2px;color:#7C6853;margin-left:8px} [data-page="kitap"] .row .type{font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;text-align:right;color:#86661C} [data-page="kitap"] .row .type.lock{color:#7C6853} [data-page="kitap"] .cta{background:#011727;color:#F3EDE2;padding:44px 48px;text-align:center;margin-top:24px} [data-page="kitap"] .cta h3{font-family:'Cormorant Garamond';font-size:30px;font-weight:500;margin:0 0 6px} [data-page="kitap"] .cta p{font-family:'EB Garamond';font-style:italic;font-size:17px;color:#C5AA6F;margin:0 0 20px} [data-page="kitap"] .cta span{background:#C5AA6F;color:#011727;padding:12px 26px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em} [data-page="kitap"] .nextprev{max-width:1000px;margin:0 auto;padding:22px 48px 60px;display:flex;justify-content:space-between;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#4A1B2F} /* ── her yazi → [data-page="yazi"] ── */ [data-page="yazi"]{margin:0;background:#FAF7F0;font-family:'EB Garamond',Georgia,serif;color:#011727} [data-page="yazi"] .bar{background:#011727;height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between} [data-page="yazi"] .brand{display:flex;align-items:center;gap:14px} [data-page="yazi"] .brand img{width:50px;height:50px} [data-page="yazi"] .word{font-family:'Cormorant Garamond';font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} [data-page="yazi"] nav{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#C5AA6F;display:flex;gap:36px;align-items:center} [data-page="yazi"] nav span.on{color:#F3EDE2} [data-page="yazi"] nav span.giris{border:1px solid #C5AA6F;color:#C5AA6F;padding:9px 18px} [data-page="yazi"] .wrap{max-width:680px;margin:0 auto;padding:56px 48px 80px} [data-page="yazi"] .crumb{font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#7C6853;margin-bottom:34px} [data-page="yazi"] .crumb b{color:#4A1B2F;font-weight:600} [data-page="yazi"] .kicker{font-family:'Open Sans';font-size:12.8px;letter-spacing:.24em;color:#86661C;margin-bottom:14px} [data-page="yazi"] h1{font-family:'Cormorant Garamond';font-size:44px;font-weight:500;line-height:1.1;margin:0 0 14px} [data-page="yazi"] .standfirst{font-family:'Cormorant Garamond';font-style:italic;font-size:21px;color:#4A1B2F;line-height:1.4;margin:0 0 22px} [data-page="yazi"] .byline{display:flex;align-items:center;gap:12px;padding-bottom:26px;border-bottom:1px solid #C5AA6F;margin-bottom:34px} [data-page="yazi"] .byline .av{width:38px;height:38px;border-radius:50%;background:#4A1B2F;color:#F3EDE2;font-family:'Cormorant Garamond';font-size:17px;display:flex;align-items:center;justify-content:center} [data-page="yazi"] .byline .nm{font-family:'Cormorant Garamond';font-size:17px;font-weight:500} [data-page="yazi"] .byline .meta{font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#7C6853} [data-page="yazi"] .byline .lock{margin-left:auto;font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#4A1B2F;border:1px solid #4A1B2F;padding:4px 10px} [data-page="yazi"] .body p{font-size:19px;line-height:1.75;margin:0 0 22px} [data-page="yazi"] .body p.drop:first-letter{font-family:'Cormorant Garamond';font-size:64px;line-height:.8;float:left;margin:10px 10px 0 0;color:#4A1B2F} [data-page="yazi"] .body h2{font-family:'Cormorant Garamond';font-size:27px;font-weight:500;margin:40px 0 14px} [data-page="yazi"] .body blockquote{margin:30px 0;padding:4px 0 4px 24px;border-left:2px solid #C5AA6F;font-family:'Cormorant Garamond';font-style:italic;font-size:22px;line-height:1.5;color:#4A1B2F} [data-page="yazi"] .note{background:#F3EDE2;border:1px solid #E1D6C0;border-left:3px solid #C5AA6F;padding:18px 22px;margin:30px 0;font-size:16.4px;line-height:1.6} [data-page="yazi"] .note b{font-family:'Open Sans';font-weight:600;font-size:12.8px;letter-spacing:.16em;color:#86661C;display:block;margin-bottom:6px} [data-page="yazi"] .sep{width:80px;height:1px;background:#C5AA6F;margin:44px auto} [data-page="yazi"] .book{display:flex;gap:18px;align-items:center;background:#F3EDE2;border:1px solid #E1D6C0;padding:20px 22px;margin:0 0 30px} [data-page="yazi"] .book .c{width:52px;height:74px;background:linear-gradient(135deg,#2f3e5a,#1c2740);border-left:4px solid #0f1830;flex:none} [data-page="yazi"] .book .t{font-family:'Cormorant Garamond';font-size:20px;font-weight:500} [data-page="yazi"] .book .k{font-size:15.2px;color:#7C6853} [data-page="yazi"] .book .lnk{margin-left:auto;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#4A1B2F;border-bottom:1px solid #C5AA6F;padding-bottom:2px;white-space:nowrap} [data-page="yazi"] .nextprev{display:flex;justify-content:space-between;border-top:1px solid #C5AA6F;padding-top:22px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#4A1B2F} /* ── her yazilar → [data-page="yazilar"] ── */ [data-page="yazilar"]{margin:0;background:#FAF7F0;font-family:'EB Garamond',Georgia,serif;color:#011727} [data-page="yazilar"] .bar{background:#011727;height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between} [data-page="yazilar"] .brand{display:flex;align-items:center;gap:14px} [data-page="yazilar"] .brand img{width:50px;height:50px} [data-page="yazilar"] .word{font-family:'Cormorant Garamond';font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} [data-page="yazilar"] nav{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#C5AA6F;display:flex;gap:36px;align-items:center} [data-page="yazilar"] nav span.on{color:#F3EDE2} [data-page="yazilar"] nav span.giris{border:1px solid #C5AA6F;color:#C5AA6F;padding:9px 18px} [data-page="yazilar"] .machine{max-width:720px;margin:64px auto 0;position:relative;text-align:center} [data-page="yazilar"] .platen{height:34px;background:linear-gradient(#1a1a1a,#000);border-radius:17px;position:relative;z-index:3;box-shadow:0 6px 14px rgba(0,0,0,.35)} [data-page="yazilar"] .platen:before,[data-page="yazilar"] .platen:after{content:'';position:absolute;top:3px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555,#111)} [data-page="yazilar"] .platen:before{left:-12px} [data-page="yazilar"] .platen:after{right:-12px} [data-page="yazilar"] .sheet{background:#FFFEFA;margin:-14px 60px 0;padding:44px 40px 30px;position:relative;z-index:2;box-shadow:0 24px 44px rgba(0,0,0,.14);border:1px solid #E1D6C0; background-image:repeating-linear-gradient(0deg,rgba(120,90,60,.03) 0 1px,transparent 1px 3px)} [data-page="yazilar"] .sheet .e{font-family:'Special Elite',monospace;font-size:14px;letter-spacing:.2em;color:#7C6853;margin-bottom:10px} [data-page="yazilar"] .sheet h1{font-family:'Special Elite',monospace;font-size:34px;font-weight:400;margin:0 0 8px;color:#011727} [data-page="yazilar"] .sheet .sub{font-family:'Special Elite',monospace;font-size:15.2px;color:#554E4E;line-height:1.6;margin:0} [data-page="yazilar"] .sheet .sub:after{content:'▌';color:#4A1B2F;animation:yazilar-blink 1.1s steps(1) infinite;margin-left:2px} @keyframes yazilar-blink{50%{opacity:0}} [data-page="yazilar"] .filters{display:flex;gap:10px;justify-content:center;margin:40px 0 50px;flex-wrap:wrap} [data-page="yazilar"] .filters span{border:1px solid #C9B99C;padding:8px 14px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#554E4E} [data-page="yazilar"] .filters span.on{background:#011727;color:#F3EDE2;border-color:#011727} [data-page="yazilar"] .month{max-width:1040px;margin:0 auto 64px;padding:0 48px;display:grid;grid-template-columns:200px 1fr;gap:44px;align-items:start} [data-page="yazilar"] .spine{position:sticky;top:24px;text-align:center} [data-page="yazilar"] .spine .cov{width:120px;height:172px;margin:0 auto 12px;background:linear-gradient(135deg,#5a2438,#3a1426);border-left:8px solid rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),6px 8px 20px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;color:#C5AA6F;padding:12px;box-sizing:border-box} [data-page="yazilar"] .spine .cov .f{border:1px solid #C5AA6F;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center} [data-page="yazilar"] .spine .cov .t{font-family:'Cormorant Garamond';font-weight:600;font-size:16.4px;letter-spacing:.1em} [data-page="yazilar"] .spine .cov .r{width:16px;height:1px;background:#C5AA6F;margin:8px 0} [data-page="yazilar"] .spine .cov .a{font-family:'Cormorant Garamond';font-style:italic;font-size:14px;color:#D9C9A6} [data-page="yazilar"] .spine .m{font-family:'Open Sans';font-size:12.8px;letter-spacing:.2em;color:#86661C} [data-page="yazilar"] .sheets{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} [data-page="yazilar"] .page{background:#FFFEFA;border:1px solid #E1D6C0;padding:24px 26px 20px;position:relative;box-shadow:0 14px 28px rgba(0,0,0,.1);cursor:pointer;transition:transform .25s; background-image:repeating-linear-gradient(0deg,rgba(120,90,60,.03) 0 1px,transparent 1px 3px)} [data-page="yazilar"] .page:hover{transform:translateY(-5px) rotate(0deg) !important} [data-page="yazilar"] .page:nth-child(odd){transform:rotate(-.6deg)} [data-page="yazilar"] .page:nth-child(even){transform:rotate(.5deg)} [data-page="yazilar"] .page .d{font-family:'Special Elite',monospace;font-size:14px;color:#7C6853;margin-bottom:8px} [data-page="yazilar"] .page h3{font-family:'Special Elite',monospace;font-size:19px;font-weight:400;margin:0 0 8px;line-height:1.3} [data-page="yazilar"] .page p{font-family:'EB Garamond';font-size:16.4px;line-height:1.55;color:#554E4E;margin:0 0 30px} [data-page="yazilar"] .stamp{position:absolute;right:16px;bottom:14px;font-family:'Special Elite',monospace;font-size:12.8px;letter-spacing:.14em;color:#4A1B2F;border:2px solid #4A1B2F;border-radius:3px;padding:3px 8px;transform:rotate(-6deg);opacity:.8} [data-page="yazilar"] .stamp.open{color:#2e5a3a;border-color:#2e5a3a} [data-page="yazilar"] .clip{position:absolute;left:18px;top:-9px;width:26px;height:18px;border:2.5px solid #9A8A6A;border-bottom:none;border-radius:12px 12px 0 0} [data-page="yazilar"] .older{text-align:center;margin:0 0 80px} [data-page="yazilar"] .older span{border:1px solid #C5AA6F;padding:11px 22px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#4A1B2F} /* ── her yazi → [data-page="yasal"] ── */ [data-page="yasal"]{margin:0;background:#FAF7F0;font-family:'EB Garamond',Georgia,serif;color:#011727} [data-page="yasal"] .bar{background:#011727;height:84px;padding:0 48px;display:flex;align-items:center;justify-content:space-between} [data-page="yasal"] .brand{display:flex;align-items:center;gap:14px} [data-page="yasal"] .brand img{width:50px;height:50px} [data-page="yasal"] .word{font-family:'Cormorant Garamond';font-size:22px;font-weight:500;letter-spacing:.22em;color:#F3EDE2} [data-page="yasal"] nav{font-family:'Open Sans';font-size:14px;letter-spacing:.16em;color:#C5AA6F;display:flex;gap:36px;align-items:center} [data-page="yasal"] nav span.on{color:#F3EDE2} [data-page="yasal"] nav span.giris{border:1px solid #C5AA6F;color:#C5AA6F;padding:9px 18px} [data-page="yasal"] .wrap{max-width:680px;margin:0 auto;padding:56px 48px 80px} [data-page="yasal"] .crumb{font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#7C6853;margin-bottom:34px} [data-page="yasal"] .crumb b{color:#4A1B2F;font-weight:600} [data-page="yasal"] .kicker{font-family:'Open Sans';font-size:12.8px;letter-spacing:.24em;color:#86661C;margin-bottom:14px} [data-page="yasal"] h1{font-family:'Cormorant Garamond';font-size:44px;font-weight:500;line-height:1.1;margin:0 0 14px} [data-page="yasal"] .standfirst{font-family:'Cormorant Garamond';font-style:italic;font-size:21px;color:#4A1B2F;line-height:1.4;margin:0 0 22px} [data-page="yasal"] .byline{display:flex;align-items:center;gap:12px;padding-bottom:26px;border-bottom:1px solid #C5AA6F;margin-bottom:34px} [data-page="yasal"] .byline .av{width:38px;height:38px;border-radius:50%;background:#4A1B2F;color:#F3EDE2;font-family:'Cormorant Garamond';font-size:17px;display:flex;align-items:center;justify-content:center} [data-page="yasal"] .byline .nm{font-family:'Cormorant Garamond';font-size:17px;font-weight:500} [data-page="yasal"] .byline .meta{font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#7C6853} [data-page="yasal"] .byline .lock{margin-left:auto;font-family:'Open Sans';font-size:12.8px;letter-spacing:.16em;color:#4A1B2F;border:1px solid #4A1B2F;padding:4px 10px} [data-page="yasal"] .body p{font-size:19px;line-height:1.75;margin:0 0 22px} [data-page="yasal"] .body p.drop:first-letter{font-family:'Cormorant Garamond';font-size:64px;line-height:.8;float:left;margin:10px 10px 0 0;color:#4A1B2F} [data-page="yasal"] .body h2{font-family:'Cormorant Garamond';font-size:27px;font-weight:500;margin:40px 0 14px} [data-page="yasal"] .body blockquote{margin:30px 0;padding:4px 0 4px 24px;border-left:2px solid #C5AA6F;font-family:'Cormorant Garamond';font-style:italic;font-size:22px;line-height:1.5;color:#4A1B2F} [data-page="yasal"] .note{background:#F3EDE2;border:1px solid #E1D6C0;border-left:3px solid #C5AA6F;padding:18px 22px;margin:30px 0;font-size:16.4px;line-height:1.6} [data-page="yasal"] .note b{font-family:'Open Sans';font-weight:600;font-size:12.8px;letter-spacing:.16em;color:#86661C;display:block;margin-bottom:6px} [data-page="yasal"] .sep{width:80px;height:1px;background:#C5AA6F;margin:44px auto} [data-page="yasal"] .book{display:flex;gap:18px;align-items:center;background:#F3EDE2;border:1px solid #E1D6C0;padding:20px 22px;margin:0 0 30px} [data-page="yasal"] .book .c{width:52px;height:74px;background:linear-gradient(135deg,#2f3e5a,#1c2740);border-left:4px solid #0f1830;flex:none} [data-page="yasal"] .book .t{font-family:'Cormorant Garamond';font-size:20px;font-weight:500} [data-page="yasal"] .book .k{font-size:15.2px;color:#7C6853} [data-page="yasal"] .book .lnk{margin-left:auto;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#4A1B2F;border-bottom:1px solid #C5AA6F;padding-bottom:2px;white-space:nowrap} [data-page="yasal"] .nextprev{display:flex;justify-content:space-between;border-top:1px solid #C5AA6F;padding-top:22px;font-family:'Open Sans';font-size:12.8px;letter-spacing:.14em;color:#4A1B2F} /* ═══════════════════════════════════════════════════════════════════════════ OUR ADDITIVE LAYER for her sub-pages. Her comps are standalone design files: nothing is a link, nothing has a focus state, no page has a width breakpoint, and every form control is a drawn rectangle. This restores the behaviour without touching src/her/*, so a revision from her drops in and keeps these fixes. Scoped with [data-page] so it can never reach the home page or another client's bundle. ═══════════════════════════════════════════════════════════════════════════ */ /* ── the menu, now made of real links ───────────────────────────────────── Her CSS colours `nav span`; these are `` now, so they need the same. */ [data-page] .bar nav a { color: inherit; text-decoration: none; transition: color .16s ease, background .16s ease; } [data-page] .bar nav a:hover { color: #F3EDE2; } [data-page] .bar nav a[aria-current="page"] { color: #F3EDE2; } [data-page] .bar nav a.giris:hover { background: #C5AA6F; color: #011727; } [data-page] .bar .brand { text-decoration: none; color: inherit; } [data-page] a.lnk, [data-page] a.v { color: inherit; } [data-page] a.lnk:hover, [data-page] a.v:hover { color: #86661C; } /* Her plan page underlines the documents in its fine print with a gold rule (`.legal u`); they are links now, and her rule no longer reached them, so the contracts a buyer accepts read as plain grey text (2026-10-05). */ [data-page="uyelik"] .legal a { color: inherit; text-decoration: none; border-bottom: 1px solid #C5AA6F; } [data-page="uyelik"] .legal a:hover { color: #4A1B2F; } /* ── SSS answers, set as reading text ────────────────────────────────────── Her 16.5px at 1.6 across a 664px column ran 85–100 characters a line on a desktop, smaller and tighter than every other page's prose (2026-10-05 critique). The posts' size and leading, held to a reading measure. */ [data-page="sss"] .qa { font-size: 18px; line-height: 1.7; max-width: 34em; } /* ── focus, which no comp carries ───────────────────────────────────────── WCAG 2.4.7. Gold on the dark grounds, burgundy on the cream ones. */ [data-page] :focus-visible { outline: 2px solid #C5AA6F; outline-offset: 3px; border-radius: 1px; } [data-page="sss"] :focus-visible, [data-page="iletisim"] :focus-visible, [data-page="kutuphane"] :focus-visible, [data-page="uyelik"] :focus-visible, [data-page="program"] :focus-visible, [data-page="yazi"] :focus-visible, [data-page="yazilar"] :focus-visible, [data-page="yasal"] :focus-visible { outline-color: #4A1B2F; } /* …and gold again on the navy bands every cream page carries: her bar, her footer, the three papers' ground. Burgundy on navy is a ring nobody sees. */ [data-page] :is(.bar, .her-foot, .her-papers .head) :focus-visible { outline-color: #C5AA6F; } /* ── the Kütüphane filters, now real buttons ─────────────────────────────── Her comp drew them as spans (`.filters span` in her/kutuphane.css). They do something now, so they are