/* giris — Ada Cam eşlemesi (D116). Yalnız html[data-tema="ada"].canli altında; v2 giris.css değişmez.
Renk = rol (öğrenci güneş, öğretmen gök, veli nane, misafir mercan). Yazdırma etkilenmesin diye tümü @media screen içinde. */
@media screen {
/* -- sayfa: içerik dikeyde ortalanır (yarısı boş görünmesin), dört kart sığsın diye biraz daha geniş -- */
html[data-tema="ada"].canli .gr-main { display: grid; align-content: center; min-height: calc(100vh - 69px); padding-block: 40px 64px; }
html[data-tema="ada"].canli .gr-in { width: 100%; max-width: calc(1040px + 2 * var(--v2-gutter)); }
html[data-tema="ada"].canli .gr-app { gap: 28px; }
/* D167: üst menüdeki "Giriş" bu sayfada da her sayfadaki mor düğme (eski "cam hap" beyaz zeminde beyaz ikon bırakıyordu —
sahip: "rengi ayarsız ve ikon kayıp"); konum bilgisini aria-current taşır. */
/* -- karşılama: Piksir + gerçek konuşma balonu (kuyruğu Piksir'e bakar) -- */
html[data-tema="ada"].canli .gr-hero { gap: 22px; }
html[data-tema="ada"].canli .gr-spark { filter: drop-shadow(0 12px 18px rgba(var(--ac-golge-r), .28)); }
html[data-tema="ada"].canli .gr-hero h1, html[data-tema="ada"].canli .gr-head h1 {
font-family: var(--ac-font-baslik); font-weight: 900; letter-spacing: -.02em; color: var(--ac-metin);
}
html[data-tema="ada"].canli .gr-hero h1 { font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.1rem); }
html[data-tema="ada"].canli .gr-hero__txt { gap: 12px; }
html[data-tema="ada"].canli .gr-bubble {
position: relative; margin-left: 12px; padding: 12px 20px; border: 1px solid var(--ac-kenar); border-radius: 22px;
background: rgba(255,255,255,.9); color: var(--ac-metin); font-family: var(--ac-font-baslik); font-weight: 800; font-size: 1.15rem;
box-shadow: 0 0 0 1px var(--ac-cizgi), var(--ac-golge);
}
/* kuyruk: balonla aynı zemin, sol kenardan Piksir'e doğru */
html[data-tema="ada"].canli .gr-bubble::before {
content: ""; position: absolute; left: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
background: rgba(255,255,255,.96); border-left: 1px solid rgba(91,72,200,.14); border-bottom: 1px solid rgba(91,72,200,.14);
border-bottom-left-radius: 4px; transform: rotate(45deg);
}
html[data-tema="ada"].canli .gr-lead { color: var(--ac-metin-2); }
html[data-tema="ada"].canli .gr-note { color: var(--ac-metin-2); }
/* -- dört seçenek kartı: cam, eşit yükseklik, rol rengi ikon karosunda ve köşe yıkamasında -- */
html[data-tema="ada"].canli .gr-choices { gap: 20px; }
@media (min-width: 720px) { html[data-tema="ada"].canli .gr-choices { grid-auto-rows: 1fr; } }
html[data-tema="ada"].canli .gr-choice {
--ra: #FFD24A; --rb: #FF9A1F; --rr: 255, 170, 40;
position: relative; isolation: isolate; min-height: 116px; padding: 20px 22px; gap: 18px;
border: 1px solid var(--ac-kenar); border-radius: var(--ac-r); background: var(--ac-cam); color: var(--ac-metin);
box-shadow: 0 0 0 1px var(--ac-cizgi), var(--ac-golge), inset 0 1px 0 #FFFFFF;
-webkit-backdrop-filter: var(--ac-blur); backdrop-filter: var(--ac-blur);
transition: transform .3s var(--ac-ease), box-shadow .3s var(--ac-ease);
}
html[data-tema="ada"].canli .gr-choice--blue { --ra: #38BDF8; --rb: #3B6CFF; --rr: 56, 140, 255; }
html[data-tema="ada"].canli .gr-choice--green { --ra: #34D9B0; --rb: #14B8C8; --rr: 20, 190, 170; }
html[data-tema="ada"].canli .gr-choice--tomato { --ra: #FF9A6B; --rb: #FF5C7A; --rr: 255, 110, 110; }
html[data-tema="ada"].canli .gr-choice::after {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
background: radial-gradient(120% 90% at 0% 0%, rgba(var(--rr), .17), transparent 56%),
radial-gradient(80% 70% at 100% 100%, rgba(var(--rr), .07), transparent 60%);
}
html[data-tema="ada"].canli .gr-choice:hover {
background: var(--ac-cam); transform: translateY(-4px);
box-shadow: 0 0 0 1px rgba(var(--rr), .28), var(--ac-golge-ust), 0 18px 40px -22px rgba(var(--rr), .6), inset 0 1px 0 #FFFFFF;
}
html[data-tema="ada"].canli .gr-choice:active { transform: translateY(-1px) scale(.995); box-shadow: 0 0 0 1px var(--ac-cizgi), var(--ac-golge); }
html[data-tema="ada"].canli .gr-choice:focus-visible { outline: none; box-shadow: var(--ac-odak), var(--ac-golge-ust); }
html[data-tema="ada"].canli .gr-choice__ic {
width: 64px; height: 64px; border: 0; border-radius: 20px; color: #FFFFFF;
background: linear-gradient(140deg, var(--ra), var(--rb));
box-shadow: 0 10px 20px -10px rgba(var(--rr), .85), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.08);
}
html[data-tema="ada"].canli .gr-choice__ic .v2-icon { color: #FFFFFF; --v2-icon-fill: rgba(255,255,255,.3); }
html[data-tema="ada"].canli .gr-choice__txt b { font-family: var(--ac-font-baslik); font-weight: 900; letter-spacing: -.01em; }
html[data-tema="ada"].canli .gr-choice__txt small { color: var(--ac-metin-2); }
html[data-tema="ada"].canli .gr-choice__go {
display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
color: var(--ac-metin-2); background: rgba(var(--rr), .12); transition: transform .25s var(--ac-ease), background-color .2s, color .2s;
}
html[data-tema="ada"].canli .gr-choice:hover .gr-choice__go { color: var(--ac-metin); background: rgba(var(--rr), .24); }
/* -- alt ekranlar (veli, misafir, cihaz PIN'i) -- */
html[data-tema="ada"].canli .gr-card { border-radius: var(--ac-r); }
html[data-tema="ada"].canli .gr-h2 { font-family: var(--ac-font-baslik); font-weight: 900; }
html[data-tema="ada"].canli .gr-card .v2-linkrow, html[data-tema="ada"].canli .gr-more .v2-linkrow { border-bottom: 1px solid rgba(91,72,200,.12); border-radius: 16px; padding-inline: 10px; }
html[data-tema="ada"].canli :is(.gr-card, .gr-more) .v2-linkrow:hover { background: rgba(255,255,255,.7); }
html[data-tema="ada"].canli :is(.gr-card, .gr-more) .v2-linkrow__ic {
color: #FFFFFF; background: linear-gradient(140deg, #9B7BFF, #5B6CFF);
box-shadow: 0 8px 16px -8px rgba(123,92,255,.75), inset 0 1px 0 rgba(255,255,255,.45);
}
html[data-tema="ada"].canli :is(.gr-card, .gr-more) .v2-linkrow__ic .v2-icon { color: #FFFFFF; --v2-icon-fill: rgba(255,255,255,.3); }
html[data-tema="ada"].canli .gr-linkbtn { border-bottom: 1px solid rgba(91,72,200,.12); }
/* Hayvan seçimi ve kayıtlı misafir profilleri: cam kutular, seçili = lavanta halka */
html[data-tema="ada"].canli :is(.gr-av, .gr-prof) {
border: 1px solid var(--ac-kenar); border-radius: 20px; background: rgba(255,255,255,.78); color: var(--ac-metin);
box-shadow: 0 0 0 1px var(--ac-cizgi), 0 8px 18px -12px rgba(var(--ac-golge-r), .45);
transition: transform .25s var(--ac-ease), background-color .2s, box-shadow .2s;
}
html[data-tema="ada"].canli :is(.gr-av, .gr-prof):hover { background: #FFFFFF; transform: translateY(-2px); }
html[data-tema="ada"].canli .gr-prof:active { transform: translateY(0) scale(.98); box-shadow: 0 0 0 1px var(--ac-cizgi); }
html[data-tema="ada"].canli .gr-av[aria-pressed="true"] {
background: linear-gradient(160deg, rgba(255,241,199,.98), rgba(255,255,255,.85));
box-shadow: 0 0 0 3px #7B5CFF, 0 10px 22px -12px rgba(91,72,255,.7);
}
html[data-tema="ada"].canli :is(.gr-av, .gr-prof):focus-visible { outline: none; box-shadow: var(--ac-odak); }
html[data-tema="ada"].canli .gr-pin { font-family: var(--ac-font-baslik); font-weight: 900; }
/* -- dar ekran -- */
@media (max-width: 719.98px) {
html[data-tema="ada"].canli .gr-main { min-height: 0; align-content: start; padding-block: 24px 48px; }
html[data-tema="ada"].canli .gr-hero { gap: 14px; }
html[data-tema="ada"].canli .gr-bubble { font-size: 1rem; padding: 10px 16px; }
}
@media (max-width: 420px) {
html[data-tema="ada"].canli .gr-choice { min-height: 100px; padding: 16px; gap: 14px; }
html[data-tema="ada"].canli .gr-choice__ic { width: 56px; height: 56px; border-radius: 17px; }
/* v2'deki gibi okun yeri yok (iki sütun); yukarıdaki display:grid onu yeniden açmasın */
html[data-tema="ada"].canli .gr-choice__go { display: none; }
}
/* -- hareket azaltma ve zayıf cihaz -- */
@media (prefers-reduced-motion: reduce) {
html[data-tema="ada"].canli :is(.gr-choice, .gr-choice__go, .gr-av, .gr-prof) { transition: none; }
html[data-tema="ada"].canli :is(.gr-choice, .gr-av, .gr-prof):hover { transform: none; }
}
html:is(.efekt-az, .a11y-calm)[data-tema="ada"].canli :is(.gr-choice, .gr-bubble) {
-webkit-backdrop-filter: none; backdrop-filter: none; transform: none; transition: none;
}
}