/* Atelier Cabine, Élise oturumu.
   Fikir: stilistin atölye masası. Sol tarafta kâğıt (konuşma), sağda stüdyo fonu (masa) ve üstünde baskılar.
   Tek imza: seçilen baskının etrafına çizilen kamel yağlı kalem halkası (temas baskısı işaretlemesi). Gerisi sakin.
   Yazı: Hanken gövde (okunaklılık), Bodoni italik yalnız Élise'in adı ve ilk ekran başlığı. */

@font-face { font-family: "Hanken"; font-weight: 400; font-display: swap; src: url(../vendor/fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken"; font-weight: 400; font-display: swap; src: url(../vendor/fonts/hanken-grotesk-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Hanken"; font-weight: 500; font-display: swap; src: url(../vendor/fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken"; font-weight: 500; font-display: swap; src: url(../vendor/fonts/hanken-grotesk-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Hanken"; font-weight: 600; font-display: swap; src: url(../vendor/fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken"; font-weight: 600; font-display: swap; src: url(../vendor/fonts/hanken-grotesk-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Bodoni"; font-style: italic; font-weight: 400; font-display: swap; src: url(../vendor/fonts/bodoni-moda-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni"; font-style: italic; font-weight: 400; font-display: swap; src: url(../vendor/fonts/bodoni-moda-latin-ext-400-italic.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --kagit: #e8e7e4;      /* konuşmanın kâğıdı, nötr */
  --kagit-ust: #f3f2f0;  /* besteci, kart */
  --masa: #cbc9c4;       /* stüdyo fonu */
  --masa-koyu: #bdbbb5;
  --murekkep: #1c1b19;
  --ikincil: #55524d;    /* kâğıtta 6,6:1, masada 4,6:1 */
  --cizgi: rgba(28, 27, 25, .14);
  --kamel: #8a6437;
  --baski: #fbfbfa;
  --golge-baski: 0 1px 1px rgba(28, 27, 25, .16), 0 10px 22px -12px rgba(28, 27, 25, .38);
  --sans: "Hanken", ui-sans-serif, system-ui, sans-serif;
  --serif: "Bodoni", "Didot", Georgia, serif;
  --cikis: cubic-bezier(.16, 1, .3, 1);
  --sohbet-w: clamp(420px, 34vw, 620px);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--kagit); color: var(--murekkep); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 2px; border-radius: 4px; }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* gren yalnız zeminde: fotoğrafın üstüne binmez (renk ve fon onayı filtre arkasından yapılmasın) */
.sohbet, .masa, .kapi, .giris { isolation: isolate; }
.sohbet::after, .masa::after, .kapi::after, .giris::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url(../assets/grain.png) 0 0 / 220px; opacity: .07; mix-blend-mode: multiply; }
.mobil { display: none; }

/* logo */
.logo { display: inline-flex; align-items: baseline; gap: .26em; white-space: nowrap; color: var(--murekkep); }
.logo svg { height: 1em; width: auto; overflow: visible; transform: translateY(.015em); }
.logo svg path { fill: none; stroke: currentColor; stroke-width: 1.1px; stroke-miterlimit: 10; vector-effect: non-scaling-stroke; }
.logo .cabine { font: italic 400 1.02em/1 var(--serif); letter-spacing: -.01em; }
.logo.kucuk { font-size: 19px; }

/* düğmeler */
.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 8px; background: var(--murekkep); color: var(--kagit-ust); font-weight: 500; text-decoration: none; transition: background .18s, transform .12s; }
.dugme:hover { background: #3a3833; }
.dugme:active { transform: scale(.98); }
.dugme.ikincil { background: transparent; color: var(--murekkep); box-shadow: inset 0 0 0 1.5px var(--murekkep); }
.dugme.ikincil:hover { background: var(--murekkep); color: var(--kagit-ust); }
.metin-dugme { font-size: 15px; color: var(--ikincil); padding: 6px 2px; transition: color .15s; }
.metin-dugme:hover { color: var(--murekkep); }
.ikon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; color: var(--murekkep); transition: background .15s; }
.ikon svg { width: 20px; height: 20px; }
.ikon:hover { background: rgba(28, 27, 25, .08); }
.ikon.dolu { background: var(--murekkep); color: var(--kagit-ust); }
.ikon.dolu:hover { background: #3a3833; }
.ikon.dolu:disabled { background: #a7a59f; cursor: default; }

/* giriş */
.giris { position: fixed; inset: 0; display: grid; place-items: center; background: var(--kagit); z-index: 50; padding: 24px; }
.giris-ic { display: grid; justify-items: center; gap: 44px; width: min(420px, 100%); }
.giris .logo { font-size: clamp(42px, 8vw, 72px); }
.giris-form { display: grid; gap: 14px; width: 100%; }
.giris-form label { display: grid; gap: 6px; font-size: 14px; color: var(--ikincil); }
.giris-form input { height: 48px; padding: 0 14px; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--kagit-ust); color: var(--murekkep); font-size: 16px; }
.giris-form input:focus { outline: none; border-color: var(--murekkep); }
.giris-not { min-height: 22px; font-size: 14px; color: var(--ikincil); text-align: center; }

/* ilk ekran */
.kapi { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr; background: var(--kagit); }
.ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 28px 10px; }
.ust-sag { display: flex; gap: 20px; }
.kapi-govde { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 420px); min-height: 0; }
.kapi-elise { display: grid; grid-template-columns: minmax(280px, 40%) minmax(0, 720px); align-items: end; justify-content: center; gap: clamp(16px, 3vw, 56px); padding: 0 clamp(24px, 5vw, 80px); min-height: 0; }
.kapi-metin { align-self: center; padding-bottom: 6vh; }
.kapi-figur { width: 100%; height: auto; max-height: 84vh; object-fit: contain; object-position: bottom; mix-blend-mode: multiply; }
.kapi h1 { font: italic 400 clamp(36px, 3.6vw, 60px)/1.1 var(--serif); letter-spacing: -.012em; margin-bottom: 30px; text-wrap: balance; }
.kapi-ipucu { margin-top: 12px; color: var(--ikincil); font-size: 15px; }
.kapi-adim { background: var(--masa); padding: clamp(28px, 4vh, 56px) clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; justify-content: center; gap: 12px; overflow: auto; margin-top: -60px; }
.kapi-adim h2 { font: 600 22px/1.25 var(--sans); }
.kapi-adim p { color: #3f3d39; max-width: 30ch; }
.kapi-adim .dugme { align-self: flex-start; margin-top: 6px; }
.onceki { padding-top: 34px; }
.onceki h3 { font: 600 15px/1.3 var(--sans); margin-bottom: 10px; }
.onceki li + li { border-top: 1px solid var(--cizgi); }
.onceki button { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; width: 100%; padding: 8px 0; text-align: left; }
.onceki img { width: 44px; height: 58px; object-fit: cover; background: var(--baski); }
.onceki span { display: block; font-size: 15px; line-height: 1.3; }
.onceki small { display: block; color: #45433e; font-size: 13.5px; }

/* besteci */
.besteci { background: var(--kagit-ust); border-radius: 12px; box-shadow: 0 0 0 1px var(--cizgi), 0 6px 18px -14px rgba(28, 27, 25, .4); padding: 6px; transition: box-shadow .18s; }
.besteci:focus-within { box-shadow: 0 0 0 1.5px var(--murekkep), 0 6px 18px -14px rgba(28, 27, 25, .4); }
.besteci-sira { display: flex; align-items: flex-end; gap: 4px; }
.besteci textarea { flex: 1; min-width: 0; resize: none; border: 0; background: none; outline: none; padding: 8px 6px; max-height: 160px; font-size: 16px; line-height: 1.5; }
.besteci textarea::placeholder { color: #6a675f; }
.besteci.buyuk { padding: 10px; }
.besteci.buyuk textarea { font-size: 18px; }
.ekler { display: flex; flex-wrap: wrap; gap: 6px; }
.ekler:not(:empty) { padding: 4px 4px 8px; }
.ek { position: relative; width: 56px; height: 56px; background: var(--masa); border-radius: 6px; overflow: hidden; }
.ek img { width: 100%; height: 100%; object-fit: cover; }
.ek b { display: grid; place-items: center; height: 100%; font: 600 13px/1 var(--sans); }
.ek-sil { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(28, 27, 25, .75); color: #fff; font-size: 13px; line-height: 20px; text-align: center; }
.kare-cip { display: inline-flex; align-items: center; gap: 8px; height: 56px; padding-right: 10px; border-radius: 6px; background: var(--kagit); font-size: 15px; font-weight: 500; }
.kare-cip img { width: 42px; height: 56px; object-fit: cover; border-radius: 6px 0 0 6px; }
.kare-cip button { color: var(--ikincil); font-size: 18px; line-height: 1; padding: 4px; }

/* çalışma */
.oda { position: fixed; inset: 0; display: grid; grid-template-columns: var(--sohbet-w) minmax(0, 1fr); }
.sohbet { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 0; background: var(--kagit); }
.logo-dugme { display: inline-flex; }
.kimlik { display: flex; align-items: center; gap: 12px; padding: 4px 28px 12px; border-bottom: 1px solid var(--cizgi); }
.figur { position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: #fff; }
.figur img { position: absolute; width: 150px; height: 150px; max-width: none; left: -46px; top: -6px; opacity: 0; }
.figur img.acik { opacity: 1; }
.kimlik strong { display: block; font: italic 400 23px/1.1 var(--serif); }
.kimlik span { display: block; color: var(--ikincil); font-size: 14.5px; line-height: 1.3; }
.ses-dugme { margin-left: auto; width: 40px; height: 40px; display: grid; place-items: center; color: var(--ikincil); opacity: .55; transition: opacity .15s; }
.ses-dugme svg { width: 17px; height: 17px; }
.ses-dugme:hover, .ses-dugme[aria-pressed="true"] { opacity: 1; }

.akis { overflow-y: auto; padding: 22px 28px 12px; display: flex; flex-direction: column; gap: 16px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(28,27,25,.25) transparent; }
.msg { max-width: 62ch; }
.msg.elise { align-self: flex-start; font-size: 17px; line-height: 1.55; white-space: pre-wrap; }
.msg.elise.yeni-tur { margin-top: 4px; }
.msg.musteri { align-self: flex-end; max-width: 82%; background: var(--murekkep); color: var(--kagit-ust); padding: 9px 14px; border-radius: 12px 12px 3px 12px; white-space: pre-wrap; }
.msg.musteri:empty { display: none; }
.msg-dosyalar { align-self: flex-end; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 86%; }
.msg-dosyalar img { width: 72px; height: 92px; object-fit: cover; background: var(--baski); box-shadow: var(--golge-baski); }
.msg-ref { align-self: flex-end; font-size: 14px; color: var(--ikincil); margin-bottom: -10px; }
.msg-kareler { display: flex; flex-wrap: wrap; gap: 8px; }
.msg-kareler button { position: relative; width: 104px; aspect-ratio: 3 / 4; background: var(--baski); box-shadow: var(--golge-baski); }
.msg-kareler img { width: 100%; height: 100%; object-fit: cover; }
.msg-yuzler { display: flex; gap: 8px; align-items: stretch; }
.msg-yuzler .yuz span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 4px; background: rgba(251,251,250,.9); font-size: 13.5px; text-align: center; }
.msg-yuzler .yuz, .msg-yuzler .yuz-baska { width: 84px; height: 108px; }
.msg-bekle { position: relative; overflow: hidden; display: inline-block; padding: 9px 14px; border-radius: 8px; background: rgba(28,27,25,.06); color: var(--ikincil); font-size: 15.5px; }
.msg-bekle::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); transform: translateX(-100%); animation: isik 2.2s ease-in-out infinite; }
.akis-son { display: grid; gap: 10px; justify-items: start; }
.msg-kareler i { position: absolute; left: 5px; bottom: 4px; padding: 0 5px; background: rgba(251, 251, 250, .88); font: 500 13px/1.45 var(--sans); }

.alt { padding: 8px 28px 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); display: grid; gap: 8px; }
.secenekler { display: flex; flex-wrap: wrap; gap: 8px; }
.secenekler:empty { display: none; }
.secenek { min-height: 42px; padding: 8px 14px; border-radius: 8px; box-shadow: inset 0 0 0 1.2px var(--murekkep); font-size: 15.5px; font-weight: 500; text-align: left; line-height: 1.3; transition: background .15s, color .15s; }
.secenek:hover { background: var(--murekkep); color: var(--kagit-ust); }
.secenek.uzun { width: 100%; }

/* masa */
.masa { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; background: var(--masa); }
.masa::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 80% at 55% 35%, rgba(255, 255, 255, .22), transparent 70%); }
.brif { display: flex; gap: clamp(22px, 2.6vw, 44px); padding: 22px clamp(20px, 2.4vw, 40px) 14px; flex-wrap: wrap; row-gap: 12px; align-items: flex-start; }
.brif:empty { display: none; }
.brif-b { flex: none; display: grid; gap: 7px; align-content: start; }
.brif-b > h3 { font: 500 14px/1.2 var(--sans); color: #3f3d39; }
.brif-dizi { display: flex; gap: 8px; align-items: center; }
.urun { position: relative; width: 62px; height: 80px; background: var(--baski); box-shadow: var(--golge-baski); overflow: hidden; }
.urun img { width: 100%; height: 100%; object-fit: cover; }
.urun.logo-d { width: 80px; object-fit: contain; }
.urun.logo-d img { object-fit: contain; padding: 6px; }
.renk { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.2); }
.urun-ad { font-size: 15px; line-height: 1.3; max-width: 22ch; }
.yuz { position: relative; width: 62px; height: 80px; overflow: hidden; background: var(--masa-koyu); transition: transform .18s var(--cikis); }
.yuz img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: saturate(.9); }
.yuz:hover { transform: translateY(-2px); }
.yuz.secili { box-shadow: 0 0 0 2px var(--kamel), var(--golge-baski); }
.yuz-baska { width: 62px; height: 80px; border-radius: 2px; box-shadow: inset 0 0 0 1.2px rgba(28,27,25,.45); font-size: 14px; line-height: 1.2; padding: 4px; }
.yuz-baska:hover { background: rgba(255,255,255,.3); }
.gecis { display: inline-flex; border-radius: 8px; box-shadow: inset 0 0 0 1.2px rgba(28,27,25,.45); overflow: hidden; }
.gecis button { padding: 6px 12px; font-size: 14.5px; transition: background .15s, color .15s; }
.gecis button[aria-pressed="true"] { background: var(--murekkep); color: var(--kagit-ust); }
.notlar { font-size: 15px; line-height: 1.35; }
.brif-b.uzar { flex: 1 1 0; min-width: 170px; }
.msg.bakiyor { color: var(--ikincil); }

.temas { min-height: 0; padding: 8px clamp(20px, 2.4vw, 40px) 16px; display: grid; gap: 16px; align-content: start; justify-content: start; }
.temas .on { grid-row: 1 / span var(--satir, 1); }
.temas.bos { display: grid; place-items: center; align-content: center; grid-template-columns: 1fr; color: #3f3d39; font-size: 17px; text-align: center; }
.baski { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; background: var(--baski); padding: 7px; box-shadow: var(--golge-baski); transition: transform .22s var(--cikis), box-shadow .22s; }
.baski:hover { transform: translateY(-3px); }
.baski.vurgu { box-shadow: 0 0 0 2px var(--murekkep), var(--golge-baski); }
.baski > button.ac { display: block; width: 100%; height: 100%; }
.baski img { width: 100%; height: 100%; object-fit: cover; background: #ededed; }
.baski .no { position: absolute; left: 7px; bottom: 7px; padding: 1px 7px; background: var(--baski); font: 500 14px/1.5 var(--sans); }
.baski .ad { position: absolute; right: 7px; bottom: 7px; max-width: 70%; padding: 1px 7px; background: var(--baski); font-size: 13.5px; line-height: 1.5; color: var(--ikincil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.baski .sec { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; background: rgba(251,251,250,.92); display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.baski .sec svg { width: 20px; height: 20px; }
.baski:hover .sec, .baski .sec:focus-visible, .baski.secili .sec { opacity: 1; }
.baski.secili .sec { background: var(--kamel); color: #fff; }
/* imza: seçilen baskıya çizilen yağlı kalem halkası */
.kalem { position: absolute; inset: -6%; width: 112%; height: 112%; pointer-events: none; overflow: visible; }
.kalem path { fill: none; stroke: var(--kamel); stroke-width: 1.1; stroke-linecap: round; opacity: .92; }
/* bekleyen kare */
.baski.eski img { filter: grayscale(.85) opacity(.55); }
.baski.yer { background: rgba(251, 251, 250, .35); box-shadow: inset 0 0 0 1px rgba(28,27,25,.2); display: grid; place-items: center; padding: 14px; text-align: center; font-size: 15px; color: #3f3d39; overflow: hidden; }
.baski.yer:hover { transform: none; }
.baski.ciziliyor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-100%); animation: isik 2.2s ease-in-out infinite; }
@keyframes isik { to { transform: translateX(100%); } }
.masa-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; padding: 12px clamp(20px, 2.4vw, 40px) 18px; }
.masa-alt:empty { display: none; }
.masa-alt .metin-dugme { margin-right: 4px; }
.masa-alt p { margin-right: auto; color: #3f3d39; font-size: 15px; }
.masa-alt .dugme { min-height: 54px; padding: 0 30px; font-size: 17px; white-space: nowrap; }

/* bırakma, çekmece, ışık */
.birak { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(28, 27, 25, .55); opacity: 0; pointer-events: none; transition: opacity .15s; }
.birak.acik { opacity: 1; }
.birak p { font: italic 400 clamp(36px, 5vw, 64px)/1.1 var(--serif); color: var(--kagit-ust); }
.cekmece { position: fixed; inset: 0; z-index: 55; display: grid; grid-template-columns: 1fr min(720px, 100%); background: rgba(28, 27, 25, .4); }
.cekmece-ic { grid-column: 2; background: var(--kagit); overflow: auto; padding: 22px 24px 32px; }
.cekmece-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; position: sticky; top: -22px; background: var(--kagit); padding: 8px 0; z-index: 1; }
.cekmece-bas h2 { font: 600 20px/1.2 var(--sans); }
.cekmece-ic .gecis { box-shadow: inset 0 0 0 1.2px var(--cizgi); }
.kadro { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; }
.kadro button { text-align: left; }
.kadro img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 12%; background: var(--masa); transition: transform .2s var(--cikis); }
.kadro button:hover img { transform: scale(1.02); }
.kadro span { display: block; margin-top: 5px; font-size: 15px; line-height: 1.25; }
.kadro small { color: var(--ikincil); font-size: 13.5px; }
.isik { position: fixed; inset: 0; z-index: 80; background: rgba(28, 27, 25, .86); display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.isik-kare { display: grid; place-items: center; padding: 24px; min-height: 0; min-width: 0; }
.isik-kare { position: relative; overflow: hidden; }
.isik-kare img { max-width: 100%; max-height: calc(100dvh - 48px); object-fit: contain; background: #ededed; cursor: zoom-in; transition: transform .25s var(--cikis); }
.isik-kare img.yakin { transform: scale(2.4); cursor: zoom-out; }
.isik-ok { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: rgba(251,251,250,.92); font-size: 22px; line-height: 48px; text-align: center; }
.isik-ok.sol { left: 16px; }
.isik-ok.sag { right: 16px; }
.isik-yan { background: var(--kagit); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.isik-yan h2 { font: 600 20px/1.25 var(--sans); }
.isik-yan p { color: var(--ikincil); font-size: 15px; }
.isik-yan .dugme { width: 100%; }
.isik-yan .metin-dugme { align-self: flex-start; }
.isik-yan .bosluk { flex: 1; }

/* dizüstü: üst şerit tek satır, karelere yer kalsın */
@media (min-width: 961px) and (max-width: 1560px) {
  .brif { flex-wrap: nowrap; gap: 18px; padding-top: 14px; padding-bottom: 8px; overflow: hidden; }
  .urun-ad { display: none; }
  .urun, .yuz, .yuz-baska { width: 48px; height: 62px; }
  .urun.logo-d { width: 62px; }
  .yuz-baska { font-size: 12.5px; }
  .brif-b.uzar { min-width: 90px; overflow: hidden; }
  .brif-b.uzar .notlar { max-height: 62px; overflow: hidden; font-size: 14px; }
}
/* telefon ve dar ekran: tek sütun, kareler sohbette büyük, masa ayrı yüzey */
@media (max-width: 960px) {
  .mobil { display: inline-block; }
  .kapi { position: static; min-height: 100dvh; }
  body { overflow: auto; }
  .kapi-govde { grid-template-columns: 1fr; }
  .kapi-elise { grid-template-columns: 1fr; padding: 0 20px 24px; gap: 0; align-content: start; }
  .kapi-metin { padding-bottom: 0; }
  .kapi-figur { width: 190px; margin: 0 auto 6px; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  .kapi h1 { font-size: clamp(32px, 9.4vw, 42px); margin-bottom: 18px; text-align: center; }
  .kapi-ipucu { text-align: center; }
  .kapi-adim { margin-top: 0; padding: 22px 20px 28px; }
  .ust { padding: 14px 18px 8px; }
  .oda { grid-template-columns: 1fr; height: 100dvh; }
  .kimlik { padding: 2px 18px 10px; }
  .figur { width: 46px; height: 46px; }
  .figur img { width: 120px; height: 120px; left: -37px; top: -5px; }
  .akis { padding: 16px 18px 10px; }
  .alt { padding: 6px 12px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .msg-kareler button { width: 100%; }
  .msg-kareler { display: grid; grid-template-columns: 1fr 1fr; }
  .msg-kareler button:only-child { grid-column: span 2; }
  .msg-yuzler { display: flex; gap: 8px; align-items: stretch; }
.msg-yuzler .yuz span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 4px; background: rgba(251,251,250,.9); font-size: 13.5px; text-align: center; }
.msg-yuzler .yuz, .msg-yuzler .yuz-baska { width: 84px; height: 108px; }
.msg-bekle { position: relative; overflow: hidden; display: inline-block; padding: 9px 14px; border-radius: 8px; background: rgba(28,27,25,.06); color: var(--ikincil); font-size: 15.5px; }
.msg-bekle::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); transform: translateX(-100%); animation: isik 2.2s ease-in-out infinite; }
.akis-son { display: grid; gap: 10px; justify-items: start; }
.msg-kareler i { font-size: 15px; }
  .masa { position: fixed; inset: 0; z-index: 40; display: block; overflow-y: auto; transform: translateY(102%); transition: transform .38s var(--cikis); }
  .masa.acik { transform: none; }
  .masa-kapat { justify-self: start; margin: 14px 18px 0; font-weight: 500; }
  .brif { padding: 14px 18px 10px; flex-wrap: wrap; gap: 16px 22px; overflow: visible; }
  .temas { padding: 6px 18px 18px; grid-template-columns: 1fr 1fr; }
  .temas .on { grid-column: span 2; grid-row: auto; }
  .baski .sec { opacity: 1; }
  .masa-alt { position: sticky; bottom: 0; z-index: 2; padding: 10px 18px max(16px, env(safe-area-inset-bottom)); background: var(--masa); }
  .masa-alt p { flex-basis: 100%; }
  .masa-alt .dugme { flex: 1; }
  .cekmece { grid-template-columns: 1fr; }
  .cekmece-ic { grid-column: 1; }
  .isik { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .isik-kare { padding: 12px; }
  .isik-kare img { max-height: calc(100dvh - 240px); }
  .isik-yan { padding: 16px 18px max(16px, env(safe-area-inset-bottom)); }
  .isik-yan .bosluk { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }