:root {
--deg-soluk: #5f6673;
--deg-yesil: #0a6a34;
}
:root[data-tema="koyu"] {
--deg-soluk: #a1a1aa;
--deg-yesil: #4ade80;
}
.deg {
position: relative;
z-index: 1;
margin-top: 92px;
padding: 0 var(--pb-edge, clamp(20px, 4vw, 48px));
}
.deg-baslik {
margin: 0 0 22px;
font-family: var(--font-display);
font-size: clamp(22px, 3vw, 30px);
font-weight: 800;
letter-spacing: -.02em;
color: var(--tm-yazi);
}
.deg-liste { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.deg-bos { margin: 0; color: var(--deg-soluk); font-size: 15px; }
.deg-one {
position: relative;
z-index: 1;
margin-top: 54px;
padding: 0 var(--pb-edge, clamp(20px, 4vw, 48px));
max-width: calc(860px + 2 * var(--pb-edge, 48px));
}
.deg-one .deg-kart { margin-bottom: 4px; }
.deg-daha {
align-self: flex-start;
border: 0;
background: none;
padding: 6px 0;
font-family: var(--font-ui);
font-size: 14.5px;
font-weight: 700;
color: var(--pb-accent-ink, #0a66cc);
cursor: pointer;
transition: opacity .2s ease;
}
.deg-daha:hover { opacity: .7; text-decoration: underline; }
:root[data-tema="koyu"] .deg-daha { color: #4da3ff; }
.deg-kart {
background: var(--pb-surface, var(--tm-yuzey-2));
border: 1px solid var(--tm-cizgi);
border-radius: 18px;
padding: 18px 20px;
}
.deg-kart-ust { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.deg-kim { min-width: 0; }
.deg-ad-satiri { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.deg-ad {
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
color: var(--tm-yazi);
}
.deg-baglantilar { display: inline-flex; align-items: center; gap: 5px; }
.deg-baglanti {
display: inline-flex;
width: 17px;
height: 17px;
color: var(--deg-soluk);
transition: color .2s ease, transform .2s ease;
}
.deg-baglanti svg { width: 100%; height: 100%; display: block; }
.deg-baglanti:hover { color: var(--tm-yazi); transform: translateY(-1px); }
.deg-kim-alt { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.deg-yildizlar { display: inline-flex; gap: 2px; line-height: 0; }
.deg-yildiz { position: relative; width: 21px; height: 21px; display: block; }
.deg-yildiz svg { width: 21px; height: 21px; display: block; }
.deg-yildiz > svg {
fill: none;
stroke: #7f838e;
stroke-width: 1.5;
stroke-linejoin: round;
}
:root[data-tema="koyu"] .deg-yildiz > svg { stroke: #8a8a92; }
.deg-yildiz-dolu {
position: absolute;
inset: 0;
overflow: hidden;
display: block;
}
.deg-yildiz-dolu > svg {
fill: #f5a623;
stroke: #9a6408;
stroke-width: 1.4;
stroke-linejoin: round;
}
:root[data-tema="koyu"] .deg-yildiz-dolu > svg { fill: #ffc043; stroke: #ffc043; }
.deg-puan-alan { display: flex; flex-direction: column; gap: 6px; }
.deg-yildiz-sec {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
padding: 4px;
margin: -4px;
border-radius: 10px;
cursor: pointer;
}
.deg-yildiz-sec:focus-visible { outline: 2px solid #0a84ff; outline-offset: 1px; }
.deg-yildizlar--sec { gap: 3px; }
.deg-yildizlar--sec .deg-yildiz { width: 28px; height: 28px; }
.deg-yildizlar--sec .deg-yildiz svg { width: 28px; height: 28px; }
.deg-puan-yazi { font-size: 14px; font-weight: 700; color: var(--deg-soluk); }
.deg-tarih { font-size: 13px; color: var(--deg-soluk); }
.deg-rozet {
font-size: 12px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
background: rgba(18, 161, 80, .12);
color: var(--deg-yesil);
}
:root[data-tema="koyu"] .deg-rozet { background: rgba(48, 209, 88, .16); }
.deg-metin {
margin: 0;
font-size: 15px;
line-height: 1.62;
color: var(--tm-yazi);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.deg-avatar {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.deg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deg-avatar--harf {
background: hsl(var(--deg-ton, 210) 60% 90%);
color: hsl(var(--deg-ton, 210) 70% 26%);
font-family: var(--font-display);
font-weight: 800;
font-size: 19px;
line-height: 1;
}
:root[data-tema="koyu"] .deg-avatar--harf {
background: hsl(var(--deg-ton, 210) 32% 24%);
color: hsl(var(--deg-ton, 210) 70% 80%);
}
.deg-istek {
width: min(620px, 100%);
margin: 0 auto 26px;
background: var(--tm-yuzey-2);
border: 1px solid var(--tm-cizgi);
border-radius: 20px;
padding: 16px 18px;
}
.deg-istek-ic {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
text-align: center;
}
.deg-istek-ic--acik { justify-content: flex-start; text-align: left; }
.deg-istek-yazi { margin: 0; font-size: 15px; font-weight: 600; color: var(--tm-yazi); }
.deg-istek-alt { margin: 6px 0 0; font-size: 14px; color: var(--deg-soluk); }
.deg-istek-ic--bitti { flex-direction: column; gap: 0; }
.deg-istek-btn {
border: 0;
border-radius: 999px;
padding: 9px 20px;
background: #0a84ff;
color: #fff;
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
cursor: pointer;
transition: background .2s ease, transform .2s cubic-bezier(.2,1,.3,1);
}
.deg-istek-btn:hover { background: #2a95ff; transform: scale(1.04); }
.deg-istek-btn:disabled { opacity: .5; cursor: default; transform: none; }
.deg-perde {
position: fixed;
inset: 0;
z-index: 2147483000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(10, 12, 16, .55);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
opacity: 0;
transition: opacity .24s ease;
overflow-y: auto;
}
.deg-perde.acik { opacity: 1; }
body.deg-pop-acik { overflow: hidden; }
.deg-pop {
width: min(560px, 100%);
max-height: 100%;
overflow-y: auto;
box-sizing: border-box;
padding: 22px 24px 26px;
border-radius: 22px;
background: var(--tm-yuzey);
border: 1px solid var(--tm-cizgi);
box-shadow: 0 30px 80px rgba(0, 0, 0, .32);
color: var(--tm-yazi);
transform: translateY(12px) scale(.985);
transition: transform .3s cubic-bezier(.2, 1, .3, 1);
}
.deg-perde.acik .deg-pop { transform: none; }
.deg-pop-ust {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 4px;
}
.deg-pop-baslik {
margin: 0;
font-family: var(--font-display);
font-size: 19px;
font-weight: 800;
letter-spacing: -.01em;
}
.deg-pop-kapat {
flex-shrink: 0;
width: 34px;
height: 34px;
margin: -4px -6px 0 0;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--deg-soluk);
cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.deg-pop-kapat:hover { background: var(--tm-yuzey-2); color: var(--tm-yazi); }
.deg-pop .deg-form { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
.deg-perde, .deg-pop { transition: none; }
}
.deg-istek--thanks { margin: 26px auto 40px; }
.deg-alt-not { margin: 6px 0 0; font-size: 12.5px; color: var(--deg-soluk); font-weight: 400; }
.deg-alt-not a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.deg-hesap-avatar { width: 46px; height: 46px; margin-right: 4px; }
.deg-pop-foto {
display: flex;
align-items: center;
gap: 16px;
}
.deg-pop-avatar { width: 72px; height: 72px; flex: none; }
.deg-pop-avatar.deg-avatar--harf { font-size: 30px; }
.deg-pop-foto-dugmeler {
display: flex;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
.deg-hesap-btn { position: relative; }
.deg-hesap-btn[hidden] { display: none; }
.deg-hesap-mesaj { margin: 6px 0 0; font-size: 13px; color: var(--deg-soluk); }
.deg-hesap-mesaj--hata { color: #c0392b; }
:root[data-tema="koyu"] .deg-hesap-mesaj--hata { color: #ff7a6b; }
.deg-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.deg-etiket {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--deg-soluk);
}
.deg-girdi {
display: block;
width: 100%;
margin-top: 6px;
box-sizing: border-box;
padding: 11px 14px;
border: 1px solid var(--tm-cizgi);
border-radius: 12px;
background: var(--tm-yuzey);
color: var(--tm-yazi);
font-family: inherit;
font-size: 15px;
font-weight: 400;
}
.deg-girdi:focus { outline: 2px solid #0a84ff; outline-offset: 1px; border-color: transparent; }
.deg-metin-girdi { resize: vertical; min-height: 118px; line-height: 1.55; }
.deg-sayac { margin: -6px 0 0; font-size: 13px; color: var(--deg-soluk); }
.deg-sayac--yeter { color: var(--deg-yesil); }
.deg-gonder {
align-self: flex-start;
border: 0;
border-radius: 999px;
padding: 11px 26px;
background: #12a150;
color: #fff;
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
cursor: pointer;
transition: background .2s ease;
}
.deg-gonder:hover:not(:disabled) { background: #17b85d; }
.deg-gonder:disabled { background: var(--tm-cizgi); color: var(--deg-soluk); cursor: default; }
.deg-uyari { margin: 0; font-size: 14px; color: #c0392b; }
:root[data-tema="koyu"] .deg-uyari { color: #ff7a6b; }
.deg-foto-satir {
display: flex;
align-items: center;
gap: 14px;
padding: 12px;
border: 1px dashed var(--tm-cizgi);
border-radius: 14px;
}
.deg-foto-onizleme { width: 52px; height: 52px; }
.deg-foto-sag { min-width: 0; }
.deg-foto-baslik { margin: 0; font-size: 14px; font-weight: 700; color: var(--tm-yazi); }
.deg-foto-alt { margin: 2px 0 8px; font-size: 13px; color: var(--deg-soluk); }
.deg-foto-btn {
display: inline-block;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid var(--tm-cizgi);
background: var(--tm-yuzey);
color: var(--tm-yazi);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.deg-foto-btn:hover { border-color: #0a84ff; }
.deg-foto-girdi {
position: absolute;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
}
@media (max-width: 640px) {
.deg { margin-top: 64px; }
.deg-kart { padding: 15px 16px; border-radius: 16px; }
.deg-istek-ic { flex-direction: column; }
.deg-gonder { align-self: stretch; text-align: center; }
.deg-baslik { font-size: 25px; }
}
body.thanks-sayfa {
--tm-yuzey:   #ffffff;
--tm-yuzey-2: #ffffff;
--tm-cizgi:   #e4e4e9;
--tm-yazi:    #16161a;
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--font-ui: var(--font-display);
}
.deg-istek--thanks {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 60;
width: min(400px, calc(100vw - 28px));
margin: 0;
padding: 22px 24px;
background: #fff;
border: 0;
border-radius: 20px;
box-shadow: 0 26px 64px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35);
animation: degIstekGir .4s cubic-bezier(.2, 1, .3, 1) both;
}
@keyframes degIstekGir {
from { opacity: 0; transform: translateY(20px) scale(.96); }
to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.deg-istek--thanks { animation: none; }
}
.deg-istek--thanks .deg-istek-ic {
flex-direction: column;
align-items: stretch;
text-align: left;
gap: 14px;
}
.deg-istek--thanks .deg-istek-yazi {
font-size: 17px;
line-height: 1.35;
padding-right: 26px;
}
.deg-istek--thanks .deg-istek-btn {
width: 100%;
padding: 12px 20px;
font-size: 15px;
}
.deg-istek--thanks .deg-istek-ic--bitti { gap: 4px; }
.deg-istek-kapat {
position: absolute;
top: 10px;
right: 12px;
width: 30px;
height: 30px;
border: 0;
border-radius: 50%;
background: transparent;
color: #5f6673;
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.deg-istek-kapat:hover { background: #f0f0f4; color: #16161a; }
@media (max-width: 560px) {
.deg-istek--thanks {
right: 12px;
left: 12px;
bottom: 12px;
width: auto;
}
}