/* CATTERY PRO — una via di case antiche: intonaco ocra, bovindi in noce, persiane turchesi, targhe smaltate */
@font-face { font-family: 'Sofia Sans'; src: url(fonts/sofia-sans-latin.woff2) format('woff2'); font-weight: 100 900; 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: 'Sofia Sans'; src: url(fonts/sofia-sans-latin-ext.woff2) format('woff2'); font-weight: 100 900; 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: 'Sofia Sans'; src: url(fonts/sofia-sans-cyrillic.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Sofia Sans'; src: url(fonts/sofia-sans-greek.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Sofia Sans Condensed'; src: url(fonts/sofia-sans-condensed-latin.woff2) format('woff2'); font-weight: 100 900; 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: 'Sofia Sans Condensed'; src: url(fonts/sofia-sans-condensed-latin-ext.woff2) format('woff2'); font-weight: 100 900; 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: 'Sofia Sans Condensed'; src: url(fonts/sofia-sans-condensed-cyrillic.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Sofia Sans Condensed'; src: url(fonts/sofia-sans-condensed-greek.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

:root {
  --ocra: #D9A441;
  --ocra-acik: #E6BD69;
  --siva-pembe: #D9906F;
  --tas: #D5C9B2;
  --kirec: #EFD7A0;
  --ceviz: #3A2318;
  --ceviz-koyu: #24150E;
  --ceviz-acik: #5A3826;
  --turkuaz: #127C80;
  --turkuaz-koyu: #0B5A5E;
  --turkuaz-acik: #5FC2C0;
  --begonvil: #B5246B;
  --emaye: #1D3F8F;
  --murekkep: #2A1A10;
  --murekkep-2: #4A2E17;
  --krem: #F6E7C8;
  --krem-2: #D9C29A;
  --f-tabela: 'Sofia Sans Condensed', 'Sofia Sans', 'Arial Narrow', system-ui, sans-serif;
  --f-metin: 'Sofia Sans', system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif;
  --golge: 0 18px 32px -14px rgba(42, 26, 16, .6);
  --siva: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .2 0 0 0 0 .07 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ic: min(1240px, 100% - 2.5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; scrollbar-color: var(--ceviz) var(--ocra-acik); }
body { margin: 0; font: 400 1.0625rem/1.6 var(--f-metin); color: var(--murekkep); background: var(--ceviz-koyu); text-rendering: optimizeLegibility; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
::selection { background: var(--turkuaz); color: #fff; }
:focus-visible { outline: 3px solid var(--begonvil); outline-offset: 3px; border-radius: 2px; }
.gece :focus-visible, .kapi :focus-visible, .cep :focus-visible, .ust :focus-visible, .alt :focus-visible, .bakici :focus-visible { outline-color: #fff; }
h1, h2, h3 { font-family: var(--f-tabela); font-weight: 800; line-height: 1; margin: 0; text-wrap: balance; letter-spacing: -.005em; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); text-transform: uppercase; }
p { margin: 0 0 1em; }
.ico { width: 1.25em; height: 1.25em; flex: none; }
.salta { position: absolute; left: -999px; top: .5rem; z-index: 50; background: var(--krem); color: var(--murekkep); padding: .6rem 1rem; }
.salta:focus { left: .5rem; }
[hidden] { display: none !important; }

/* ── targa smaltata ── */
.tabela {
  display: inline-flex; align-items: center; gap: .4em;
  font: 800 .78rem/1 var(--f-tabela); letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--emaye);
  padding: .5em .85em .45em; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--emaye), inset 0 0 0 3.5px rgba(255, 255, 255, .92), 0 1px 1px rgba(0, 0, 0, .25), 0 3px 6px -2px rgba(0, 0, 0, .3);
}
.st-musait .tb-durum { background-color: var(--turkuaz); box-shadow: inset 0 0 0 2px var(--turkuaz), inset 0 0 0 3.5px rgba(255, 255, 255, .92), 0 3px 6px -2px rgba(0, 0, 0, .3); }
.st-rezerve .tb-durum, .tb-yeni { background-color: var(--begonvil); box-shadow: inset 0 0 0 2px var(--begonvil), inset 0 0 0 3.5px rgba(255, 255, 255, .92), 0 3px 6px -2px rgba(0, 0, 0, .3); }
.tb-kucuk { font-size: .74rem; white-space: nowrap; }

/* ── bottoni ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .75em 1.25em .7em; border: 0; border-radius: 6px; cursor: pointer;
  font: 800 1rem/1 var(--f-tabela); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-wa { background: var(--turkuaz); color: #fff; box-shadow: 0 8px 16px -8px rgba(11, 90, 94, .9); }
.btn-wa:hover { background: var(--turkuaz-koyu); }
.btn-cizgi { background: transparent; color: var(--murekkep); box-shadow: inset 0 0 0 2px currentColor; }
.btn-cizgi:hover { background: var(--murekkep); color: var(--ocra-acik); }
.btn-beyaz { background: #fff; color: var(--turkuaz-koyu); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .5); }
.btn-begonvil { background: var(--begonvil); color: #fff; box-shadow: 0 8px 16px -8px rgba(110, 16, 60, .9); }
.btn-begonvil:hover { background: #961c58; }
.btn-tabela { background: #fff; color: var(--emaye); }
.btn-buyuk { min-height: 56px; font-size: 1.12rem; padding-inline: 1.5em; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ── testata ── */
.ust { background: var(--ceviz); color: var(--krem); display: flex; align-items: center; gap: 1.5rem; padding: .7rem max(1.25rem, (100% - 1240px) / 2); position: relative; z-index: 5; box-shadow: 0 2px 0 var(--ceviz-koyu); }
.marka { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex: none; }
.marka img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 2px var(--krem-2); }
.marka-ad b { display: block; font: 800 1.3rem/1 var(--f-tabela); text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--emaye); padding: .38em .7em .32em; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--emaye), inset 0 0 0 3.5px rgba(255, 255, 255, .92); }
.marka-ad small { display: block; font: 600 .78rem/1.2 var(--f-tabela); letter-spacing: .14em; text-transform: uppercase; color: var(--krem-2); margin-top: .2rem; }
.ust-nav { display: flex; gap: .5rem; margin-inline-start: auto; }
.ust-nav a { font: 700 .92rem/1 var(--f-tabela); text-transform: uppercase; letter-spacing: .07em; text-decoration: none; padding: .5rem .6rem .45rem; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgba(246, 231, 200, .32); white-space: nowrap; }
.ust-nav a:hover { box-shadow: inset 0 0 0 1.5px var(--krem); background: rgba(246, 231, 200, .08); }
.ust-az { display: flex; align-items: center; gap: .6rem; }
.dil-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .8rem; background: transparent; border: 1px solid rgba(246, 231, 200, .35); border-radius: 6px; cursor: pointer; font: 700 .9rem/1 var(--f-tabela); text-transform: uppercase; letter-spacing: .06em; color: var(--krem); }
.dil-btn:hover { border-color: var(--krem); }
.btn-ust { min-height: 44px; padding-inline: 1rem; }

/* ── facciata (prima schermata) ── */
.cephe, .kat, .ev { background-color: var(--ocra); background-image: var(--siva); }
.cephe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); overflow-x: clip; align-items: center; padding: clamp(3rem, 7vw, 6rem) max(1.25rem, (100% - 1240px) / 2) clamp(4rem, 8vw, 7rem); }
.cephe h1 { font-size: clamp(3rem, 6.6vw, 6rem); line-height: .9; text-transform: uppercase; color: var(--murekkep); margin-bottom: 1.6rem; max-width: 11ch; }
.giris { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 54ch; color: var(--murekkep); }
.giris b { font-weight: 700; }
.kanit { list-style: none; padding: 0; margin: 1.6rem 0 2rem; display: grid; grid-template-columns: repeat(2, max-content); gap: .55rem 1.6rem; font: 700 1rem/1.2 var(--f-tabela); letter-spacing: .04em; text-transform: uppercase; }
.kanit li { display: flex; align-items: center; gap: .45rem; }
.kanit .ico { color: var(--turkuaz-koyu); stroke-width: 3; }
.eylem { display: flex; flex-wrap: wrap; gap: .8rem; }
.cephe-pencere { display: flex; justify-content: center; padding-block: 1.5rem 0; }
.cephe-pencere .pencere { width: min(100% - 22rem, 360px); min-width: 280px; }

/* ── il bovindo (cumba) con le persiane ── */
.pencere { position: relative; display: flex; flex-direction: column; }
.cumba {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 12px; border: 0; cursor: pointer;
  background: var(--ceviz); border-radius: 2px; perspective: 1800px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 -10px 0 rgba(0, 0, 0, .18), var(--golge);
  margin-top: 18px; margin-bottom: 26px;
}
.cumba::before { content: ''; position: absolute; inset: -18px -16px auto; height: 18px; background: var(--ceviz-koyu); border-radius: 3px 3px 0 0; box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .5); }
.cumba::after { content: ''; position: absolute; inset: auto -12px -14px; height: 14px; background: var(--ceviz-acik); border-radius: 0 0 3px 3px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .25), 0 10px 14px -8px rgba(0, 0, 0, .6); }
.cam { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; background: #160d08; box-shadow: inset 0 0 0 3px #2b1910; }
.cam img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cumba:hover .cam img { transform: scale(1.035); }
.cam-bos { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 1rem; }
.cam-bos img { width: 46%; height: auto; opacity: .6; border-radius: 50%; }
.kepenk {
  position: absolute; top: 12px; bottom: 12px; width: calc(50% - 12px); z-index: 2;
  background: repeating-linear-gradient(180deg, #1A8A8E 0 10px, #0E6468 10px 11px, #41A7A8 11px 12px), var(--turkuaz);
  box-shadow: inset 0 0 0 3px #0E6468, inset 0 0 0 5px #2E9B9D;
  transition: transform 1.4s var(--ease);
  --aci: 0deg;
}
.k-sol { left: 12px; transform-origin: left center; transform: rotateY(calc(var(--aci) * -1)); }
.k-sag { right: 12px; transform-origin: right center; transform: rotateY(var(--aci)); }
.st-musait .kepenk { --aci: 102deg; }
.st-rezerve .kepenk, .fotosuz .kepenk { --aci: 58deg; }
.st-yuva .kepenk { --aci: 8deg; }
.st-ebeveyn .kepenk, .st-dogdu .kepenk { display: none; }
.st-vitrin .kepenk { display: block; --aci: 78deg; }
.st-kapali .kepenk { --aci: 0deg; }
.st-musait .cumba:hover .kepenk { --aci: 108deg; }
@media (min-width: 861px) { .buyuk .cumba { perspective: 5000px; } .buyuk.st-musait .kepenk, .buyuk.st-musait .cumba:hover .kepenk { --aci: 162deg; } .buyuk.st-rezerve .kepenk { --aci: 70deg; } }
.st-rezerve .cumba:hover .kepenk { --aci: 66deg; }
.js-kepenk .pencere:not(.acik) .kepenk { --aci: 0deg; }
.kac { position: absolute; z-index: 3; bottom: 20px; inset-inline-end: 20px; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem; border-radius: 4px; background: rgba(36, 21, 14, .78); color: var(--krem); font: 700 .85rem/1 var(--f-tabela); }
.kac .ico { width: 1rem; height: 1rem; }

.kunye { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.ad { margin: 0; font-family: var(--f-tabela); font-weight: 800; line-height: 1; }
.kunye .ad { font-size: 1.65rem; text-transform: uppercase; letter-spacing: .01em; }
.kunye dl { margin: 0; display: grid; gap: .35rem; width: 100%; }
.kunye dl div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .8rem; align-items: baseline; padding-bottom: .35rem; border-bottom: 1px solid rgba(42, 26, 16, .2); }
.kunye dt { font: 700 .78rem/1.3 var(--f-tabela); letter-spacing: .1em; text-transform: uppercase; color: var(--murekkep-2); }
.kunye dd { margin: 0; font-size: .98rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.ems { font: 800 1rem/1 var(--f-tabela); letter-spacing: .04em; }
.ems-ad { font-style: normal; }
.amac { margin: 0; font: 700 .9rem/1.2 var(--f-tabela); letter-spacing: .06em; text-transform: uppercase; color: #074346; }
.not { margin: 0; font-size: .95rem; }
.pencere.buyuk .kunye { align-items: center; text-align: center; }
.pencere.buyuk .kunye dl { display: none; }
.pencere.buyuk .ad { font-size: 1.45rem; color: #fff; background: var(--emaye); padding: .5em .95em .45em; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--emaye), inset 0 0 0 4px rgba(255, 255, 255, .92), 0 5px 10px -4px rgba(0, 0, 0, .4); }
.rol { margin: 0; font: 600 1rem/1.35 var(--f-metin); max-width: 30ch; }

/* ── piano dei gattini disponibili ── */
.kat { padding: 0 max(1.25rem, (100% - 1240px) / 2) clamp(4rem, 7vw, 6rem); position: relative; }
.kat::before { content: ''; display: block; height: 16px; margin: 0 calc(-1 * max(1.25rem, (100% - 1240px) / 2)) clamp(3rem, 6vw, 5rem); background: var(--ceviz); box-shadow: inset 0 3px 0 var(--ceviz-acik), 0 12px 18px -10px rgba(42, 26, 16, .55); }
.kat-bas { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.kat-bas h2 { margin-bottom: .9rem; }
.kat-bas p { font-size: 1.12rem; margin: 0; }
.sokak { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 2.2rem clamp(2rem, 4vw, 3.5rem); }
.bos { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: 900px; }
.bos h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); text-transform: uppercase; margin-bottom: .8rem; }
.bos p { font-size: 1.1rem; max-width: 46ch; }
.cumba-bos { cursor: default; }

/* ── registro delle nascite ── */
.defter { background-color: var(--siva-pembe); background-image: var(--siva); padding: clamp(4rem, 7vw, 6rem) max(1.25rem, (100% - 1240px) / 2); }
.defter-tablo { overflow-x: auto; }
.defter table { width: 100%; border-collapse: collapse; min-width: 760px; font-variant-numeric: tabular-nums; }
.defter th, .defter td { text-align: start; vertical-align: middle; padding: .9rem .9rem .9rem 0; border-bottom: 1px solid rgba(42, 26, 16, .28); }
.defter thead th { font: 700 .8rem/1.2 var(--f-tabela); letter-spacing: .1em; text-transform: uppercase; color: var(--murekkep-2); border-bottom: 2px solid var(--murekkep); padding-top: 0; }
.defter-ad { display: flex; align-items: center; gap: .8rem; background: none; border: 0; padding: 0; cursor: pointer; text-align: start; font: 800 1.2rem/1.1 var(--f-tabela); text-transform: uppercase; }
.defter-ad img { width: 56px; height: 56px; object-fit: cover; border: 3px solid var(--ceviz); border-radius: 2px; }
.defter-ad:hover span { text-decoration: underline; text-underline-offset: .2em; }
.eb { display: block; font-size: .93rem; line-height: 1.35; }

/* ── genitori: il piano di sera ── */
.gece { background-color: var(--ceviz-koyu); background-image: var(--siva); color: var(--krem); padding: clamp(4rem, 7vw, 6rem) max(1.25rem, (100% - 1240px) / 2); }
.gece .kat-bas p { color: var(--krem-2); }
.yildiz-grup + .yildiz-grup { margin-top: clamp(3rem, 6vw, 4.5rem); }
.grup-ad { margin-bottom: 1.8rem; }
.grup-ad .tabela { font-size: 1rem; }
.sokak-gece { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.gece .cumba { background: #4a2d1f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 24px 36px -14px rgba(0, 0, 0, .9); }
.gece .cumba::before { background: #2a1810; }
.gece .cumba::after { background: #5d3a28; }
.gece .kunye dl div { border-bottom-color: rgba(246, 231, 200, .16); }
.gece .kunye dt { color: var(--krem-2); }
.gece .amac { color: var(--turkuaz-acik); }

/* ── chi siamo + come adottare ── */
.ev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); padding: clamp(4rem, 7vw, 6rem) max(1.25rem, (100% - 1240px) / 2); background-color: var(--ocra-acik); }
.ev h2 { margin-bottom: 1.5rem; }
.ev-hakkimizda p { max-width: 62ch; }
.ev-hakkimizda .ilk { font-size: 1.25rem; line-height: 1.5; font-weight: 600; }
.adimlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.adim { display: grid; grid-template-columns: 64px 1fr; gap: 1.1rem; align-items: start; }
.adim h3 { font-size: 1.45rem; text-transform: uppercase; margin: .35rem 0 .45rem; }
.adim p { margin: 0; }
.kapi-no {
  display: grid; place-items: center; width: 64px; height: 52px; border-radius: 26px / 22px;
  font: 800 1.9rem/1 var(--f-tabela); color: #fff; background: var(--emaye);
  box-shadow: inset 0 0 0 2px var(--emaye), inset 0 0 0 4px rgba(255, 255, 255, .92), 0 4px 8px -3px rgba(0, 0, 0, .35);
}

/* ── cortile: galleria + guida ── */
.avlu, .rehber-serit { background-color: #E2A68A; background-image: var(--siva); padding: clamp(4rem, 7vw, 6rem) max(1.25rem, (100% - 1240px) / 2); }
.rehber-serit { padding-top: 0; }
.kareler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kare { position: relative; margin: 0; }
.kare.gizli { display: none; }
.kareler.hepsi .kare.gizli { display: block; }
.kare-ac { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; background: var(--ceviz); aspect-ratio: 1; overflow: hidden; border-radius: 2px; box-shadow: 0 10px 18px -12px rgba(42, 26, 16, .7); }
.kare-ac img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.kare-ac:hover img { transform: scale(1.04); }
.kare .tb-yeni { position: absolute; top: 10px; inset-inline-start: 10px; }
.kare figcaption { font: 700 .85rem/1.3 var(--f-tabela); letter-spacing: .05em; text-transform: uppercase; padding-top: .45rem; }
.daha { text-align: center; margin: 2.2rem 0 0; }
.tabelalar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.tabelalar a {
  display: flex; flex-direction: column; gap: .55rem; height: 100%; padding: 1.3rem 1.4rem 1.4rem; text-decoration: none; border-radius: 4px;
  background: var(--ceviz) repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 3px, transparent 3px 9px); color: var(--krem);
  box-shadow: inset 0 0 0 2px #2b1910, inset 0 0 0 4px rgba(217, 194, 154, .3), var(--golge); transition: transform .3s var(--ease);
}
.tabelalar a:hover { transform: translateY(-3px) rotate(-.4deg); }
.tabelalar { grid-auto-flow: dense; align-items: start; }
.tabelalar li:nth-child(1) { grid-column: span 2; }
.tabelalar li:nth-child(1) .r-ad { font-size: 1.9rem; }
.tabelalar li:nth-child(6) { grid-column: 1 / -1; }
.tabelalar li:nth-child(3n+2) a { background: var(--emaye); box-shadow: inset 0 0 0 3px var(--emaye), inset 0 0 0 5px rgba(255, 255, 255, .9), var(--golge); color: #fff; }
.tabelalar li:nth-child(3n+2) .r-ilk { color: #DCE4F5; }
.tabelalar li:nth-child(3n) a { background: var(--turkuaz-koyu); box-shadow: inset 0 0 0 2px #084548, inset 0 0 0 4px rgba(255, 255, 255, .35), var(--golge); color: #fff; }
.tabelalar li:nth-child(3n) .r-ilk { color: #D3ECEA; }
.tabelalar-dik li { grid-column: auto !important; }
.r-ad { font: 800 1.3rem/1.1 var(--f-tabela); text-transform: uppercase; letter-spacing: .02em; }
.r-ilk { font-size: .95rem; line-height: 1.45; color: var(--krem-2); }

/* ── la porta: contatti ── */
.kapi { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5rem); padding: clamp(4rem, 7vw, 6rem) max(1.25rem, (100% - 1240px) / 2); color: #fff; background-color: var(--turkuaz); background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 110px), var(--siva); }
.kapi h2 { margin-bottom: 1.2rem; }
.kapi-yazi > p { font-size: 1.15rem; max-width: 44ch; margin-bottom: 1.8rem; }
.kapi-bilgi { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .8rem; }
.kapi-bilgi li { display: flex; align-items: center; gap: .7rem; }
.kapi-bilgi a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); }
.kapi-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; align-content: start; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--turkuaz-koyu); border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18), inset 0 0 0 10px var(--turkuaz-koyu), inset 0 0 0 12px rgba(255, 255, 255, .12), 0 24px 40px -20px rgba(0, 0, 0, .6); }
.kapi-form label { display: grid; gap: .4rem; font: 700 .82rem/1.2 var(--f-tabela); letter-spacing: .08em; text-transform: uppercase; }
.kapi-form .genis { grid-column: 1 / -1; }
.kapi-form input, .kapi-form textarea { width: 100%; min-height: 48px; padding: .7rem .85rem; border: 2px solid transparent; border-radius: 4px; background: #fff; color: var(--murekkep); font: 400 1rem/1.4 var(--f-metin); letter-spacing: 0; text-transform: none; }
.kapi-form textarea { resize: vertical; }
.kapi-form input:focus, .kapi-form textarea:focus { outline: none; border-color: var(--ocra); }
.kapi-form input[aria-invalid="true"] { border-color: #FFB4C8; }
.kapi-form .onay { display: flex; gap: .7rem; align-items: flex-start; font: 400 .95rem/1.45 var(--f-metin); letter-spacing: 0; text-transform: none; }
.kapi-form .onay input { -webkit-appearance: none; appearance: none; width: 24px; min-height: 24px; height: 24px; margin: 0; padding: 0; border: 2px solid #fff; border-radius: 4px; background: transparent; cursor: pointer; flex: none; }
.kapi-form .onay input:checked { background: var(--begonvil) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 17px no-repeat; border-color: var(--begonvil); }
.kapi-form .onay a { color: #fff; }
.tuzak { position: absolute !important; left: -9999px; }
.sonuc { margin: 0; min-height: 1.4em; font-weight: 600; }
.sonuc.hata { color: #FFD2DE; }

/* ── l'app ── */
.cep { display: flex; align-items: center; gap: clamp(1.4rem, 4vw, 3rem); padding: clamp(2.5rem, 5vw, 3.5rem) max(1.25rem, (100% - 1240px) / 2); background: var(--emaye); color: #fff; }
.cep img { border-radius: 50%; box-shadow: 0 0 0 3px #fff; flex: none; }
.cep h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: .6rem; }
.cep p { max-width: 60ch; }
.iphone { margin: .8rem 0 0; font-weight: 600; }

/* ── piè di pagina ── */
.alt { background: var(--ceviz-koyu); color: var(--krem); padding: 3.5rem max(1.25rem, (100% - 1240px) / 2) 2.5rem; display: grid; grid-template-columns: auto 1fr; gap: 1.6rem 3rem; align-items: start; }
.alt-marka { display: flex; align-items: center; gap: 1rem; }
.alt-marka img { border-radius: 50%; }
.alt-marka p { margin: 0; color: var(--krem-2); }
.alt-marka b { font: 800 1.3rem/1.2 var(--f-tabela); text-transform: uppercase; color: var(--krem); letter-spacing: .04em; }
.alt-iletisim { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: flex-end; align-self: center; }
.alt-iletisim a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; min-height: 44px; }
.alt-iletisim a:hover { text-decoration: underline; }
.alt-link, .emegi { grid-column: 1 / -1; margin: 0; color: var(--krem-2); font-size: .95rem; }
.alt-link { border-top: 1px solid rgba(246, 231, 200, .15); padding-top: 1.4rem; }
.link-btn { background: none; border: 0; padding: .3rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; color: inherit; font-size: inherit; }
.emegi a { color: var(--krem); }
.admin-link { margin: 0; padding: .6rem 1rem 1rem; text-align: center; background: var(--ceviz-koyu); font-size: .78rem; }
.admin-link a { color: #9C8466; text-decoration: none; }

/* ── finestre di dialogo ── */
dialog { border: 0; padding: 0; }
dialog::backdrop { background: rgba(28, 16, 10, .72); }
.yaprak { width: min(760px, 100% - 2rem); max-height: min(86vh, 900px); border-radius: 6px; background: var(--kirec); color: var(--murekkep); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.yaprak-ust { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.3rem; background: var(--ceviz); color: var(--krem); position: sticky; top: 0; }
.yaprak-ust h2 { font-size: 1.6rem; }
.x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: inherit; cursor: pointer; }
.dil-ara { display: block; width: calc(100% - 2.6rem); margin: 1.1rem 1.3rem .4rem; min-height: 48px; padding: .6rem .9rem; border: 2px solid var(--ceviz); border-radius: 4px; font: inherit; background: #fff; }
.dil-liste { list-style: none; margin: 0; padding: .6rem 1.3rem 1.4rem; columns: 3 11rem; column-gap: 1.5rem; }
.dil-liste a { display: block; padding: .45rem .2rem; text-decoration: none; break-inside: avoid; border-bottom: 1px solid rgba(42, 26, 16, .1); }
.dil-liste a:hover, .dil-liste a[aria-current] { color: var(--turkuaz-koyu); font-weight: 700; }
.bakici { width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(24, 14, 9, .96); color: var(--krem); }
.bakici figure { margin: 0; height: 100%; display: grid; place-items: center; align-content: center; gap: .8rem; padding: 4.5rem 4.5rem 3.5rem; }
.bakici img { max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; object-fit: contain; border: 10px solid var(--ceviz); box-shadow: 0 30px 60px -20px #000; }
.bakici figcaption { font: 800 1.2rem/1.2 var(--f-tabela); text-transform: uppercase; letter-spacing: .05em; text-align: center; }
.bk-btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(246, 231, 200, .14); color: var(--krem); cursor: pointer; }
.bk-btn:hover { background: rgba(246, 231, 200, .26); }
.bk-sol { left: 1rem; top: 50%; translate: 0 -50%; }
.bk-sag { right: 1rem; top: 50%; translate: 0 -50%; }
.bk-x { right: 1rem; top: 1rem; }
.bk-say { position: absolute; left: 0; right: 0; bottom: 1rem; margin: 0; text-align: center; font: 700 .9rem/1 var(--f-tabela); letter-spacing: .1em; color: var(--krem-2); }
.uyari { position: fixed; left: 50%; bottom: 1.2rem; translate: -50% 0; z-index: 40; background: var(--ceviz); color: var(--krem); padding: .8rem 1.2rem; border-radius: 6px; box-shadow: var(--golge); max-width: calc(100% - 2rem); }

/* ── pagine di lettura (guida, privacy) ── */
body.okuma { background: var(--ceviz-koyu); }
.yazi { background-color: #EBCB86; background-image: var(--siva); padding: clamp(2.5rem, 6vw, 4.5rem) max(1.25rem, (100% - 760px) / 2) clamp(4rem, 8vw, 6rem); min-height: 70vh; }
.yazi h1 { display: inline-block; font-size: clamp(1.9rem, 4.4vw, 3.1rem); text-transform: uppercase; margin-bottom: 1.6rem; color: #fff; background: var(--emaye); padding: .35em .65em .3em; border-radius: 10px; box-shadow: inset 0 0 0 3px var(--emaye), inset 0 0 0 6px rgba(255, 255, 255, .92), 0 8px 16px -8px rgba(0, 0, 0, .45); }
.yazi article, .yazi > .giris { border-top: 6px solid var(--ceviz); padding-top: 1.6rem; }
.yazi h2 { font-size: 1.6rem; text-transform: none; margin: 2.2rem 0 .7rem; }
.yazi p, .yazi li { max-width: 68ch; font-size: 1.1rem; line-height: 1.7; }
.yazi .giris { font-size: 1.25rem; }
.geri { margin-bottom: 2rem; }
.geri a { display: inline-flex; align-items: center; gap: .4rem; font: 700 .95rem/1 var(--f-tabela); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; min-height: 44px; }
.oto { font-size: .92rem !important; color: var(--murekkep-2); font-style: italic; }
.tabelalar-dik { grid-template-columns: 1fr; max-width: 760px; margin-top: 2rem; }
.yazi-son { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--ceviz); }

/* ── movimento ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── schermi più stretti ── */
@media (max-width: 1100px) {
  .ust { flex-wrap: wrap; row-gap: .4rem; }
  .ust-nav { order: 3; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; gap: .45rem; padding-bottom: .3rem; }
  .ust-az { margin-inline-start: auto; }
  .kareler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabelalar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .cephe { grid-template-columns: 1fr; padding-top: 2.5rem; }
  .cephe h1 { max-width: 13ch; }
  .cephe-pencere .pencere { width: min(100% - 3.5rem, 340px); }
  .ev, .kapi { grid-template-columns: 1fr; }
  .bos { grid-template-columns: 1fr; }
  .bos .cumba { max-width: 260px; }
  .alt { grid-template-columns: 1fr; }
  .alt-iletisim { justify-content: flex-start; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .marka img { width: 44px; height: 44px; }
  .marka-ad b { font-size: 1.12rem; }
  .btn-ust span, .dil-btn span { display: none; }
  .btn-ust, .dil-btn { width: 44px; padding: 0; }
  .kanit { grid-template-columns: 1fr; }
  .eylem .btn { width: 100%; }
  .kareler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tabelalar { grid-template-columns: 1fr; }
  .kapi-form { grid-template-columns: 1fr; }
  .cep { flex-direction: column; align-items: flex-start; }
  .bakici figure { padding: 4rem .6rem 4rem; }
  .bk-sol, .bk-sag { top: auto; bottom: .6rem; translate: none; }
  .bk-say { bottom: 1.6rem; }
}

@media (max-width: 700px) {
  .defter table { min-width: 0; }
  .defter thead { display: none; }
  .defter tbody, .defter tr, .defter th, .defter td { display: block; }
  .defter tr { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(42, 26, 16, .28); }
  .defter th, .defter td { border: 0; padding: 0; }
  .defter th, .defter .td-eb { grid-column: 1 / -1; }
  .defter td[data-l]::before { content: attr(data-l); display: block; margin-bottom: .2rem; font: 700 .74rem/1.3 var(--f-tabela); letter-spacing: .1em; text-transform: uppercase; color: var(--murekkep-2); }
  .tabelalar li:nth-child(1) { grid-column: auto; }
}

/* ── fascia della demo (solo con DEMO=1) ── */
.demo-fascia { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .2rem 1rem; padding: .35rem 1rem; background: var(--ceviz-koyu); color: var(--krem-2); font: 600 .85rem/1.3 var(--f-metin); text-align: center; border-bottom: 1px solid rgba(246, 231, 200, .14); }
.demo-fascia b { color: var(--krem); font-family: var(--f-tabela); letter-spacing: .06em; text-transform: uppercase; }
.demo-fascia a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; color: var(--ocra-acik); font-weight: 700; text-underline-offset: 3px; }
.demo-fascia a .ico { width: 1em; height: 1em; }

/* ── crediti delle foto ── */
.crediti { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.credito { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: start; padding-bottom: 1rem; border-bottom: 1px solid rgba(42, 26, 16, .15); font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.credito img { width: 96px; height: 96px; object-fit: cover; border-radius: 4px; }
.credito a { min-height: 24px; }
@media (max-width: 560px) {
  .demo-fascia { font-size: .8rem; padding-block: .1rem; }
  .demo-nota-x { display: none; }
}
@media (max-width: 400px) {
  .marka { gap: .5rem; }
  .marka-ad b { font-size: .98rem; padding-inline: .55em; }
  .ust { gap: .6rem; }
}