*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden;background:#fff;font-family:Arial,Helvetica,sans-serif;color:#0B1F3A}
body{width:1312px;min-height:1199px}
:root{
--blue:#0068F0;
--navy:#002A5C;
--green:#00A878;
--orange:#F59E0B;
--pink:#EC4899;
--teal:#14B8A6;
--purple:#8B5CF6;
--text:#0B1F3A;
--muted:#6B7C93;
--line:#E3EAF4;
--bg:#F8FBFE;
}
#board{
width:1312px;
height:1199px;
background:#F8FBFE;
padding:18px 21px 0;
overflow:hidden;
}
.topbar{
height:37px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 5px 4px;
}
.brand{display:flex;align-items:center;gap:9px}
.brand-mark{width:27px;height:27px;display:flex;align-items:flex-end;gap:3px}
.brand-mark i{display:block;width:5px;border-radius:2px 2px 0 0;background:var(--blue)}
.brand-mark i:nth-child(1){height:13px}
.brand-mark i:nth-child(2){height:21px}
.brand-mark i:nth-child(3){height:27px}
.brand-name{font-size:25px;font-weight:800;letter-spacing:-1px;color:#09285A}
.tagline{font-size:10px;font-weight:700;letter-spacing:1.8px;color:#365F8C;margin-left:16px}
.top-title{text-align:right}
.top-title strong{font-size:15px;display:block;color:#09285A}
.top-title span{font-size:8.5px;color:#6B7C93}
.grid{
display:grid;
grid-template-columns:repeat(4,299px);
grid-template-rows:repeat(3,334px);
gap:12px 26px;
}
.panel{
width:299px;
height:334px;
background:#fff;
border:1px solid #DDE7F3;
border-radius:10px;
box-shadow:0 2px 7px rgba(26,82,135,.05);
padding:10px 10px 0;
overflow:hidden;
position:relative;
}
.head{height:39px;display:flex;gap:8px;align-items:flex-start}
.num{
width:25px;height:25px;border-radius:50%;background:var(--blue);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;
flex:none;
}
.num.teal{background:var(--teal)}
.num.purple{background:var(--purple)}
.head h2{font-size:15px;line-height:16px;margin:0;font-weight:800;color:#09285A;letter-spacing:-.2px}
.head p{font-size:8.5px;color:#1671BD;margin:2px 0 0;line-height:10px}
.visual{height:201px;border:1px solid #E7EEF7;border-radius:8px;padding:8px;background:#FCFEFF;overflow:hidden}
.notes{
position:absolute;left:10px;right:10px;bottom:0;height:72px;
border-top:1px solid #E5EDF6;
display:grid;grid-template-columns:1fr 1.18fr 1fr;
}
.note{padding:7px 5px 0;border-right:1px solid #EDF1F6}
.note:last-child{border:0}
.note-title{font-size:6.7px;font-weight:800;color:#124D85;display:flex;gap:4px;align-items:center;margin-bottom:5px}
.note-title b{
width:12px;height:12px;border:1px solid #C8D9ED;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;color:var(--blue);font-size:7px
}
.note ul{padding:0 0 0 9px;margin:0}
.note li{font-size:6.4px;line-height:9px;color:#53708F;margin:0}
.card{border:1px solid #E5EDF6;background:#fff;border-radius:6px}
.small{font-size:6.5px;color:#6B7C93}
.tiny{font-size:5.8px;color:#6B7C93}
.label{font-size:6.5px;color:#58708A}
.value{font-size:11px;font-weight:800;color:#0B1F3A}
.btn{background:var(--blue);color:#fff;border-radius:4px;padding:5px 8px;font-size:6.5px;font-weight:700;display:inline-block}
.input{height:22px;border:1px solid #DCE6F1;border-radius:4px;background:#fff;padding:5px 7px;font-size:6.5px;color:#284B70}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}
.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}
.mt4{margin-top:4px}.mt6{margin-top:6px}.mt8{margin-top:8px}
.mb4{margin-bottom:4px}
.rowline{height:18px;display:flex;align-items:center;gap:5px;border-bottom:1px solid #F0F4F8}
.rowline:last-child{border:0}
.dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none}
.dot.orange{background:var(--orange)}.dot.pink{background:var(--pink)}.dot.green{background:var(--green)}.dot.teal{background:var(--teal)}.dot.purple{background:var(--purple)}
svg{display:block}
.donut{width:100px;height:100px}
.donut text{font-family:Arial}
.progress{height:6px;background:#EDF2F8;border-radius:5px;overflow:hidden}
.progress i{display:block;height:100%;border-radius:5px;background:var(--blue)}
.bar{height:7px;background:#EAF0F7;border-radius:5px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:5px;background:var(--blue)}
.chip{font-size:5.8px;border:1px solid #DCE6F1;padding:3px 5px;border-radius:4px;color:#42627F;background:#fff}
.photo{
height:58px;border-radius:6px;overflow:hidden;position:relative;
background:linear-gradient(180deg,#BFE6F7 0%,#EFF9FC 57%,#C8D8DF 58%,#8EA4B0 100%);
}
.skyline{position:absolute;bottom:0;left:0;right:0;height:43px}
.skyline span{position:absolute;bottom:0;background:#425A69;border-radius:1px 1px 0 0}
.skyline span:nth-child(1){left:4%;width:8%;height:24px}.skyline span:nth-child(2){left:13%;width:7%;height:35px}.skyline span:nth-child(3){left:21%;width:10%;height:20px}.skyline span:nth-child(4){left:33%;width:8%;height:42px}.skyline span:nth-child(5){left:42%;width:10%;height:29px}.skyline span:nth-child(6){left:53%;width:7%;height:37px}.skyline span:nth-child(7){left:62%;width:11%;height:25px}.skyline span:nth-child(8){left:75%;width:8%;height:39px}.skyline span:nth-child(9){left:85%;width:11%;height:27px}
.photo-title{position:absolute;left:8px;top:7px;color:#fff;font-weight:800;font-size:9px;text-shadow:0 1px 3px #234}
.photo-sub{font-size:5.5px;color:#fff;position:absolute;left:8px;top:21px}
.world{height:64px;position:relative;background:#EFF8FD;border-radius:7px;overflow:hidden}
.world:before{
content:"";position:absolute;left:15px;top:13px;width:235px;height:42px;
background:
radial-gradient(ellipse at 18% 50%,#82D7C8 0 11%,transparent 12%),
radial-gradient(ellipse at 34% 30%,#9AC7F3 0 14%,transparent 15%),
radial-gradient(ellipse at 49% 54%,#82D7C8 0 13%,transparent 14%),
radial-gradient(ellipse at 68% 34%,#9AC7F3 0 15%,transparent 16%),
radial-gradient(ellipse at 83% 57%,#82D7C8 0 10%,transparent 11%);
opacity:.85
}
.mapbox{height:103px;background:#F2F9FD;border-radius:7px;overflow:hidden}
.mapbox svg{width:100%;height:100%}
.footer{
height:36px;margin-top:11px;display:flex;align-items:center;justify-content:space-between;padding:0 5px
}
.footer-brand{display:flex;align-items:center;gap:6px}
.footer-brand strong{font-size:14px;color:#09285A}
.footer-brand span{font-size:7px;color:#55708D}
.flow-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;font-size:7px;color:#4C6885;font-weight:700}
.flow-nav em{font-style:normal;color:var(--blue);font-size:10px}
.footer-right{font-size:7px;color:#6B7C93}
/* Panel 01 */
.inputrow{display:grid;grid-template-columns:1.02fr .58fr .74fr auto;gap:4px;height:38px;align-items:stretch}
.minisel{border:1px solid #DCE6F1;border-radius:5px;background:#fff;padding:5px 5px;overflow:hidden}
.minisel small{display:block;font-size:4.8px;color:#6B7C93;line-height:6px;white-space:nowrap}
.minisel b{font-size:5.9px;color:#284B70;font-weight:700;line-height:8px;white-space:nowrap}
.calcbtn{background:#0874EF;color:#fff;border-radius:5px;font-size:5.9px;font-weight:800;
display:flex;align-items:center;justify-content:center;padding:0 8px;white-space:nowrap}
.money-box{height:38px;background:#063B86;border-radius:6px;color:#fff;padding:6px 9px;display:flex;align-items:center;justify-content:space-between}
.money-box strong{font-size:14px}.money-box span{font-size:5.8px}
.money-content{display:grid;grid-template-columns:1.05fr .95fr;gap:7px;margin-top:6px;height:112px}
.breakdown{padding:5px}
.breakdown h3{font-size:7px;margin:0 0 3px;color:#183B60}
.donut-wrap{display:flex;align-items:center;justify-content:center}
.donut-wrap svg{width:92px;height:92px}
.calc-btn{margin-top:6px;text-align:center}
.calc-btn span{background:#0874EF;color:#fff;padding:5px 26px;border-radius:4px;font-size:6px;font-weight:800}
/* Panel 02 */
.state-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:7px}
.state-map{height:109px;border:1px solid #E6EEF6;border-radius:6px;overflow:hidden}
.state-info{padding:7px;background:#fff;border:1px solid #E6EEF6;border-radius:6px}
.state-info strong{font-size:10px;color:#09285A}.state-info p{font-size:6.3px;margin:5px 0;color:#55708D}
.state-info .big{font-size:11px;color:#00A878;font-weight:800}
.scale{height:9px;border-radius:5px;background:linear-gradient(90deg,#E7F4FF,#8DC5FF,#0068F0,#00A878);margin-top:7px}
.scale-label{display:flex;justify-content:space-between;font-size:5px;color:#6B7C93;margin-top:2px}
/* Panel 03 */
.city-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:7px;margin-top:6px}
.budget{padding:6px}.budget h3{font-size:7px;margin:0 0 3px}
.budget-donut{height:74px;display:flex;justify-content:center;align-items:center}
.compare{padding:6px}.compare h3{font-size:6.5px;margin:0 0 4px}
.citychip{height:18px;border-radius:4px;background:#fff;border:1px solid #E1EAF4;font-size:5.7px;padding:5px;color:#47617B;margin-bottom:4px}
.citychip.active{background:#0068F0;color:#fff;border-color:#0068F0}
/* Panel 04 */
.career-top{display:grid;grid-template-columns:1.1fr .9fr;gap:7px}
.career-title{font-size:9px;font-weight:800}.career-sub{font-size:5.5px;color:#6B7C93;margin-top:1px}
.selector{height:20px;border:1px solid #DCE6F1;border-radius:4px;margin-top:6px;padding:5px 6px;font-size:5.8px;color:#47617B}
.career-range{font-size:13px;font-weight:800;margin-top:8px}.career-range small{font-size:6px;font-weight:500;color:#6B7C93}
.career-bars{padding:6px}.career-bars h4{font-size:6.2px;margin:0 0 6px}
.related{margin-top:6px;font-size:5.5px;color:#58708A}.relchips{display:flex;gap:3px;margin-top:4px}.relchip{border:1px solid #DCE6F1;border-radius:10px;padding:4px 5px;font-size:5.3px}
/* Panel 05 */
.vs-top{display:grid;grid-template-columns:1fr 32px 1fr;align-items:center;gap:5px}
.salarybig{text-align:center;font-size:13px;font-weight:800;color:#09285A}.salarybig small{display:block;font-size:5.7px;color:#6B7C93;font-weight:500;margin-top:2px}
.vs{width:28px;height:28px;border-radius:50%;background:#EFF6FF;color:#0068F0;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:800}
.comp-table{margin-top:6px;border-top:1px solid #E5EDF6}
.comp-row{display:grid;grid-template-columns:1fr 1fr 1fr;height:17px;align-items:center;border-bottom:1px solid #F0F4F8;font-size:5.7px}
.comp-row b{text-align:center;font-weight:700}.comp-row span{color:#6B7C93}
.greenbox{margin-top:7px;background:#00A878;color:#fff;border-radius:6px;padding:7px}.greenbox strong{font-size:13px}.greenbox small{display:block;font-size:5.7px;margin-top:2px}
.mini-bars{display:flex;align-items:flex-end;justify-content:center;gap:25px;height:36px;margin-top:4px}.mini-bar{width:29px;border-radius:3px 3px 0 0;background:#9BD7C8}.mini-bar.blue{background:#2382EE}.mini-bars span{font-size:5px;color:#6B7C93;display:block;text-align:center;margin-top:2px}
/* Panel 06 */
.family-head{display:flex;align-items:center;gap:7px}
.family-icon{width:28px;height:28px;border-radius:50%;background:#E9F3FF;display:flex;align-items:center;justify-content:center;color:#0068F0;font-size:14px}
.family-head strong{font-size:9px}.family-head small{display:block;font-size:5.5px;color:#55708D;margin-top:2px}
.family-main{display:grid;grid-template-columns:1.1fr .9fr;gap:7px;margin-top:6px}
.leftbudget{padding:6px}.leftbudget h4{font-size:6.5px;margin:0}
.family-donut{height:79px;display:flex;justify-content:center;align-items:center}
.remaining{background:#F0FBF7;border:1px solid #D7F2E9;border-radius:6px;padding:9px 7px}
.remaining small{font-size:5.5px;color:#00A878}.remaining strong{font-size:15px;display:block;margin-top:5px;color:#09285A}.remaining span{font-size:5.2px;color:#6B7C93}
.family-note{margin-top:5px;font-size:5.5px;color:#00A878}
/* Panel 07 */
.relocate-cards{display:grid;grid-template-columns:1fr 28px 1fr;gap:5px;align-items:center}
.place{border:1px solid #E0E9F3;border-radius:6px;overflow:hidden}.place-photo{height:37px}.place-info{padding:5px}.place-info strong{font-size:7px}.place-info small{font-size:5px;display:block;color:#6B7C93;margin-top:2px}.arrow-circle{width:24px;height:24px;border-radius:50%;background:#EFF7FF;color:#0068F0;display:flex;align-items:center;justify-content:center;font-size:12px}
.reloc-stats{display:grid;grid-template-columns:1fr 1fr;margin-top:5px}.stat{font-size:5.5px;color:#6B7C93;padding:3px;border-bottom:1px solid #EEF3F7}.stat b{display:block;font-size:7px;color:#0B1F3A;margin-top:2px}
.route-map{height:57px;background:#F4FAFD;border-radius:6px;margin-top:6px;position:relative;overflow:hidden}
.route-map svg{width:100%;height:100%}
/* Panel 08 */
.country-head{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.country{text-align:center;border:1px solid #E5EDF6;border-radius:5px;padding:4px 2px}.flag{font-size:12px}.country small{display:block;font-size:5px;color:#47617B;margin-top:2px}
.int-table{margin-top:7px}
.int-row{display:grid;grid-template-columns:1.2fr repeat(5,1fr);height:19px;border-bottom:1px solid #EEF3F7;align-items:center;font-size:5.2px;text-align:center}.int-row:first-child.int-row span:first-child.int-row b{font-size:5.6px}
.int-bottom{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}.explore{background:#0874EF;color:#fff;text-align:center;padding:6px;border-radius:4px;font-size:6px;font-weight:700}
/* Panel 09 */
.tax-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:7px}
.brackets{padding:6px}.brackets h3{font-size:6.8px;margin:0 0 4px}.br{display:grid;grid-template-columns:27px 1fr;gap:5px;align-items:center;height:20px}.rate{font-size:6px;font-weight:800;color:#fff;text-align:center;padding:4px;border-radius:3px}.range{font-size:5.6px;color:#58708A;border:1px solid #E3EAF4;border-radius:4px;padding:4px}
.effective{padding:7px;text-align:center}.effective h3{font-size:6.5px;text-align:left;margin:0}.gauge{height:80px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.gauge svg{width:110px;height:70px}.effnum{font-size:18px;font-weight:800;margin-top:-4px}.effsub{font-size:5.7px;color:#6B7C93}.tax-total{margin-top:9px;border-top:1px solid #E5EDF6;padding-top:5px;text-align:left}.tax-total span{font-size:5.7px;color:#6B7C93}.tax-total strong{display:block;font-size:9px;margin-top:2px}
/* Panel 10 */
.aff-top{display:grid;grid-template-columns:1fr 1fr;gap:7px}.aff-pay{padding:7px}.aff-pay h3{font-size:6.5px;margin:0}.aff-pay strong{font-size:15px;display:block;margin-top:4px}.aff-pay small{font-size:5.5px;color:#6B7C93}.aff-gauge{padding:5px;text-align:center}.aff-gauge svg{width:100px;height:66px;margin:auto}.aff-gauge strong{font-size:13px}.aff-gauge small{display:block;font-size:5.3px;color:#6B7C93}
.rentline{margin-top:5px;padding:4px 5px}.rentline div{font-size:5.5px;color:#6B7C93}.rentline strong{font-size:7px}.slider{height:5px;background:#E7EEF6;border-radius:5px;margin-top:5px}.slider i{display:block;width:37%;height:100%;background:#0068F0;border-radius:5px}.expense-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}.expense{padding:6px 3px;text-align:center}.expense b{font-size:6px;display:block}.expense small{font-size:5px;color:#6B7C93}.aff-alert{margin-top:6px;background:#EAF9F4;border:1px solid #CBEDE1;border-radius:5px;padding:6px;font-size:5.4px;color:#008A65}
/* Panel 11 */
.journey{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.flowleft{display:flex;flex-direction:column;gap:5px}
.flowbox{padding:7px;border-radius:5px;border:1px solid #DDE7F1}
.flowbox.blue{background:#0068F0;color:#fff;border:0}.flowbox.green{background:#E9FAF4}.flowbox.red{background:#FFF2F3}.flowbox strong{font-size:11px}.flowbox small{font-size:5.2px;display:block;margin-top:2px}.flowbox.blue small{color:#fff}.flowbox.green strong{color:#00A878}.flowbox.red strong{color:#EC4899}
.flowright{padding:6px}.flowright h3{font-size:7px;margin:0 0 5px}
.flow-donut{height:82px;display:flex;justify-content:center}
.flow-list .rowline{height:15px;font-size:5.3px}.flow-list .rowline span:last-child{margin-left:auto;color:#58708A}
/* Panel 12 */
.guide-photo{height:76px;border-radius:6px;overflow:hidden;background:linear-gradient(135deg,#DDEFEA,#FFF4DD);position:relative}
.desk{position:absolute;left:0;right:0;bottom:0;height:22px;background:#9A704B}
.paper{position:absolute;width:80px;height:50px;background:#fff;left:72px;bottom:11px;transform:rotate(-3deg);box-shadow:0 3px 8px rgba(0,0,0,.12);border-radius:2px}
.paper:before{content:"";position:absolute;left:9px;right:9px;top:9px;height:4px;background:#0068F0;box-shadow:0 9px 0 #DDE7F1,0 18px 0 #DDE7F1}
.cup{position:absolute;width:24px;height:20px;border-radius:0 0 8px 8px;background:#A55F3D;left:23px;bottom:12px}.cup:after{content:"";position:absolute;width:9px;height:9px;border:3px solid #A55F3D;border-left:0;border-radius:0 8px 8px 0;right:-8px;top:2px}
.guide-overlay{position:absolute;right:9px;top:15px;background:#fff;border-radius:6px;padding:7px 9px;box-shadow:0 2px 8px rgba(0,0,0,.08)}.guide-overlay strong{font-size:8px}.guide-overlay small{display:block;font-size:5.5px;color:#6B7C93;margin-top:3px}.read{display:inline-block;background:#0068F0;color:#fff;border-radius:4px;padding:5px 8px;font-size:5.5px;font-weight:700;margin-top:5px}
.popular{font-size:6.7px;font-weight:800;margin:6px 0 4px}.guide-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.guide-item{border:1px solid #E3EAF4;border-radius:5px;padding:6px 2px;text-align:center}.guide-item b{display:block;font-size:10px;color:#0068F0}.guide-item small{font-size:4.8px;color:#58708A}
/* responsive only when viewed smaller */
@media(max-width:1312px){
body{transform-origin:top left}
#board{transform-origin:top left}
}
#foto12-kapali{background-size:100% 100% !important;
background-position:center !important;background-repeat:no-repeat !important;border-color:transparent !important}
#foto03{background-size:cover !important;background-position:center 55% !important}
/* ============ TEK SAYFA YERLEŞİMİ ============ */
body{width:auto;min-height:0;background:var(--bg)}
.page-shell{max-width:1180px;margin:0 auto;padding:20px 18px 32px}
.page-head,.page-foot{zoom:1.5}
.page-main{display:flex;justify-content:center;margin:26px 0 30px}
.page-panel{width:299px;height:334px;zoom:2.6}
.page-panel .notes{display:grid} /* şablondaki gibi görünür */
.pages{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.pages a{border:1px solid var(--line);border-radius:6px;padding:8px 11px;text-decoration:none;
color:var(--text);font-size:11px;font-weight:700;background:#fff}
.pages a:hover{border-color:var(--blue);color:var(--blue)}
/* sayfa ölçeği: alt/üst bar dar ekranda sarmasın */
.footer{height:auto;min-height:36px;gap:14px;flex-wrap:wrap;padding:6px 5px}
/* canlı kontroller */
.money-box input{background:transparent;border:0;color:#fff;font-size:14px;font-weight:800;
font-family:inherit;width:92px;padding:0;outline:none}
select.minisel{appearance:none;cursor:pointer}
select.minisel b{display:none}
.veri-not{font-size:6px;color:#6B7C93;margin-top:4px}
.live{cursor:pointer}
.live:hover{outline:1px solid var(--blue)}
/* 08 — sahte (mockup) kıta gradyanlarını kapat, gerçek harita görünsün */
.world:before{display:none !important}
.world{background:#eef7fd !important}
#foto08 svg path{shape-rendering:geometricPrecision}
/* ===== duyarlı yerleşim ===== */
.page-shell{max-width:1180px;margin:0 auto;padding:20px 18px 32px;width:100%}
.page-main{display:flex;justify-content:center;align-items:flex-start;margin:26px 0 30px;width:100%}
@media(max-width:720px){
.page-shell{padding:12px 10px 20px}
.page-main{margin:14px 0 18px}
.pages a{font-size:10px;padding:6px 8px}
}
@media(max-width:480px){
.page-shell{padding:10px 8px 16px}
}
/* ===== mobil: üst bar ve seçiciler taşmasın ===== */
.topbar{flex-wrap:wrap;row-gap:6px;height:auto;min-height:37px}
.brand{flex-wrap:wrap}
.tagline{margin-left:0}
.top-title{text-align:left}
.minisel b{display:block;overflow:hidden;text-overflow:ellipsis}
.minisel select{max-width:100%}
@media(max-width:720px){
.top-title{display:none} /* pano meta bilgisi: mobilde gizli */
.tagline{font-size:8px;letter-spacing:1px}
.brand-name{font-size:17px}
.brand-mark{width:20px;height:20px}
.brand-mark i{width:4px}
.footer{height:auto;min-height:30px}
.flow-nav{font-size:6px;gap:4px}
}
@media(max-width:480px){
.top-title{display:none}
.footer-right{display:none}
}
/* ==========================================================================
TELEFON YERLEŞİMİ: maket ölçeği yerine okunur ölçek
(pano 299px tabanlı olduğu için telefonda kalıp haline getirilir)
========================================================================== */
@media(max-width:720px){
.page-main{display:block}
.page-panel{zoom:1 !important;width:100% !important;height:auto !important;padding:14px 12px 12px}
.page-panel .head{height:auto;margin-bottom:8px}
.page-panel .head h2{font-size:20px;line-height:1.2}
.page-panel .head p{font-size:13px;line-height:1.35;margin-top:3px}
.page-panel .num{width:32px;height:32px;font-size:12px}
.page-panel .visual{height:auto;padding:0;border:0;background:transparent}
/* iç ızgaralar tek kolona iner */
.page-panel .money-content,.page-panel .state-layout,.page-panel .city-layout,
.page-panel .career-top,.page-panel .tax-layout,.page-panel .family-main,
.page-panel .journey,.page-panel .aff-top,.page-panel .vs-top,
.page-panel .relocate-cards,.page-panel .g2,.page-panel .g3,
.page-panel .expense-cards,.page-panel .guide-icons,.page-panel .country-head{
grid-template-columns:1fr !important;height:auto !important;gap:10px !important}
.page-panel .money-content{display:block}
/* okunur yazı ölçüleri */
.page-panel .label,.page-panel .small,.page-panel .tiny,.page-panel .kucuk,
.page-panel .veri-not,.page-panel .stat,.page-panel .int-row,.page-panel .comp-row,
.page-panel .note li,.page-panel .range,.page-panel .rate,.page-panel .selector{
font-size:12px !important;line-height:1.45 !important;height:auto !important}
.page-panel .rowline{font-size:13px !important;height:auto !important;min-height:26px;padding:5px 0}
.page-panel .value{font-size:17px !important}
.page-panel .big{font-size:19px !important}
.page-panel .money-box{height:auto !important;padding:10px 12px}
.page-panel .money-box strong,.page-panel .money-box input{font-size:22px !important}
.page-panel .money-box span{font-size:11px !important}
.page-panel .inputrow{display:block !important;height:auto !important}
.page-panel .inputrow .minisel{margin-top:8px}
.page-panel .minisel small{font-size:11px !important;line-height:1.4}
.page-panel .minisel b,.page-panel .minisel select{font-size:14px !important;width:100% !important;max-width:100% !important}
.page-panel .calcbtn{margin-top:10px;height:38px !important;font-size:14px !important;border-radius:8px}
.page-panel .btn{font-size:14px !important;padding:10px 14px !important;width:100% !important}
.page-panel .photo-title{font-size:16px !important}
.page-panel .photo,.page-panel .guide-photo,.page-panel .world,
.page-panel .state-map,.page-panel .route-map{height:150px !important}
.page-panel .place-photo{height:90px !important}
.page-panel .notes{position:static;height:auto;margin-top:12px;grid-template-columns:1fr;
gap:8px;padding:10px 0 0;font-size:11px}
.page-panel .note-title{font-size:11px}
.page-panel .cap,.page-panel .range,.page-panel .chip,.page-panel .citychip,
.page-panel .relchip,.page-panel .flowbox small,.page-panel .guide-item small{
font-size:12px !important}
.page-panel .br{height:auto !important;min-height:28px}
.page-panel .career-title,.page-panel .career-sub,.page-panel .career-bars h4,
.page-panel .leftbudget h4,.page-panel .budget h3,.page-panel .compare h3,
.page-panel .brackets h3,.page-panel .family-head strong,.page-panel .popular{
font-size:14px !important;height:auto !important}
.page-panel .career-range{font-size:18px !important}
.page-panel .effnum,.page-panel .aff-pay strong,.page-panel .aff-gauge strong,
.page-panel .greenbox strong,.page-panel .remaining strong,.page-panel .flowbox strong{
font-size:22px !important}
.page-panel svg,.page-panel .donut,.page-panel .donut-wrap svg{max-width:220px;margin:0 auto}
.page-panel table{font-size:12px}
}
@media(max-width:720px){
/* şablondaki satır içi küçük yazıları telefonda okunur yap */
.page-panel [style*="font-size:4"], .page-panel [style*="font-size:5"],
.page-panel [style*="font-size:6"], .page-panel [style*="font-size:7"],
.page-panel [style*="font-size: 4"], .page-panel [style*="font-size: 5"],
.page-panel [style*="font-size: 6"], .page-panel [style*="font-size: 7"]{
font-size:12px !important;line-height:1.4 !important}
.page-panel [style*="font-size:8"], .page-panel [style*="font-size: 8"],
.page-panel [style*="font-size:9"], .page-panel [style*="font-size: 9"]{
font-size:13px !important;line-height:1.4 !important}
.page-panel [style*="font-size:10"], .page-panel [style*="font-size: 10"],
.page-panel [style*="font-size:11"], .page-panel [style*="font-size: 11"]{
font-size:14px !important}
/* grafiklerin iç yazıları da okunur kalsın */
.page-panel svg text{font-size:9px}
}
@media(max-width:720px){
/* telefonda okunur en küçük yazı: tüm küçük sınıflar 12px */
.page-panel small,.page-panel em,.page-panel .int-row,.page-panel .int-row b,
.page-panel .scale-label span,.page-panel .stat,.page-panel .stat b,
.page-panel .flowbox small,.page-panel .flow-list .rowline,.page-panel .expense small,
.page-panel .guide-item small,.page-panel .rentline div,.page-panel .aff-alert,
.page-panel .aff-pay small,.page-panel .aff-gauge small,.page-panel .effsub,
.page-panel .tax-total span,.page-panel .place-info small,.page-panel .citychip,
.page-panel .relchip,.page-panel .chip,.page-panel .selector,.page-panel .veri-not,
.page-panel .popular,.page-panel .photo-sub,.page-panel .state-info p,
.page-panel .note li,.page-panel .note-title,.page-panel .explore,
.page-panel .salarybig small,.page-panel .comp-row,.page-panel .comp-row b,
.page-panel .rowline span,.page-panel .rowline em,.page-panel .label,.page-panel .kucuk,
.page-panel .tiny,.page-panel .small,.page-panel .money-box span,
.page-panel .footnote,.page-panel .arsh{
font-size:12px !important;line-height:1.45 !important;height:auto !important}
.page-panel .int-row{display:grid;grid-template-columns:1fr !important;gap:2px;padding:8px 0;
border-bottom:1px solid var(--line)}
.page-panel .int-row b{display:inline-block;min-width:64px}
.page-panel .comp-row{grid-template-columns:1fr;gap:2px;padding:6px 0}
.page-panel .note{display:block;padding:6px 0}
.page-panel .notes ul{padding-left:16px}
}
/* ==========================================================================
TELEFON: kesin okunurluk — taban 12.5px, önemli rakamlar büyük
(en sonda duruyor, önceki tüm kuralları geçersiz kılar)
========================================================================== */
@media(max-width:720px){
.page-panel, .page-panel *{font-size:12.5px !important;line-height:1.45 !important}
.page-panel h2{font-size:20px !important}
.page-panel h3,.page-panel h4{font-size:15px !important}
.page-panel strong,.page-panel b,.page-panel .value,.page-panel .big{font-size:15px !important}
.page-panel .money-box strong,.page-panel .money-box input{font-size:26px !important}
.page-panel .effnum,.page-panel .aff-pay strong,.page-panel .aff-gauge strong,
.page-panel .greenbox strong,.page-panel .remaining strong,.page-panel .flowbox strong,
.page-panel .career-range,.page-panel .salarybig{font-size:22px !important}
.page-panel svg text{font-size:10px !important}
.page-panel .num{font-size:14px !important}
.page-panel, .page-panel *{height:auto !important;min-height:0}
.page-panel .bar,.page-panel .progress,.page-panel .slider,.page-panel .scale{height:10px !important}
.page-panel .dot,.page-panel .nokta{width:10px !important;height:10px !important}
.page-panel .rowline{min-height:30px;padding:6px 0}
}
/* 03: fotoğraf üzerindeki maket bina blokları gereksiz (gerçek fotoğraf var) */
#foto03 .skyline{display:none !important}
/* diğer şehirler için gerçek kira grafiği alanı */
#foto03.kira-grafik{background-image:none !important;background:#f2f9fd !important;border:1px solid #e6eef6}
.kira-cubuk{display:flex;gap:6px;align-items:flex-end;height:100%;padding:8px 10px 0}
.kira-cubuk>div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.kira-cubuk i{display:block;width:100%;border-radius:3px 3px 0 0;background:#9dc3f0}
.kira-cubuk .sec i{background:#0068F0}
.kira-cubuk span{font-size:5px;color:#55708D;margin-top:2px;white-space:nowrap}
/* 03: fotoğraf üstündeki rozet taşmasın */
#foto03 div[style*="position:absolute"]{max-width:56% !important;white-space:normal !important;
line-height:1.25 !important;overflow:hidden !important}
#foto03 .photo-title,#foto03 .photo-sub{max-width:60%;overflow:hidden;white-space:nowrap}
/* 03: kira grafiği etiketleri kesilmesin */
#foto03.kira-grafik{padding:6px 2px 0 !important}
.kira-cubuk>div{min-width:0;padding:0 2px;overflow:visible}
.kira-cubuk span{font-size:4.8px;line-height:1.15;text-align:center;white-space:normal;
word-break:break-word;max-width:100%;display:block}
.kira-cubuk .deger{font-size:5.4px;font-weight:800;color:#0B1F3A;margin-bottom:2px}
/* ===== GERÇEK FOTOĞRAFLAR (ayrı dosya: önbelleklenir, styles.css şişmez) ===== */
.photo.kent-newyork{background-image:url(assets/foto-nyc.jpg) !important;
background-size:cover !important;background-position:center 55% !important}
.photo.kent-dallas{background-image:url(assets/foto-dallas.jpg) !important;
background-size:cover !important;background-position:center 55% !important}
.place-photo.foto-kaliforniya{background-image:url(assets/foto-california.jpg) !important;
background-size:cover !important;background-position:center !important}
.place-photo.foto-teksas{background-image:url(assets/foto-texas.jpg) !important;
background-size:cover !important;background-position:center !important}
.place-photo.foto-kaliforniya svg,.place-photo.foto-teksas svg{display:none !important}
/* ===== BAYRAKLAR: emoji yerine gerçek görsel (Windows emoji bayrak çizmez) ===== */
.country .flag{min-height:16px;display:flex;align-items:center;justify-content:center}
.country .flag img{width:24px;height:auto;max-height:16px;border-radius:2px;display:block;
box-shadow:0 0 0 .5px rgba(11,31,58,.12)}
/* üst menü (pano meta yerine gerçek site menüsü) */
.top-nav{display:flex;flex-wrap:wrap;gap:4px;font-size:8px;font-weight:700;margin-left:auto}
.top-nav a{color:#365F8C;text-decoration:none;padding:3px 6px;border-radius:99px}
.top-nav a:hover{background:#e8f1ff;color:#0068F0}
@media(max-width:720px){.top-nav{font-size:10px;margin-left:0;width:100%}}
/* 12: maket illüstrasyon parçaları (masa/kahve/kâğıt) fotoğraf olmadan anlamsız → kapalı */
#foto12 .desk,#foto12 .paper,#foto12 .cup{display:none !important}
#foto12{min-height:74px;border-radius:10px;position:relative;
background-image:url(assets/foto-hero.jpg) !important;
background-size:cover !important;background-position:center 40% !important}
/* ==========================================================================
B) MARKA YEŞİL — VERİ MAVİ (kullanıcı onayı)
Sitenin kimlik rengi korunur; şablonun düzeni ve grafik renkleri aynı kalır.
========================================================================== */
.pno,.num,.btn,.explore,.read{background:#059669 !important}
.calcbtn{background:#059669 !important}
.btn.kk{background:#059669 !important}
.top-nav a:hover{background:#ecfdf5 !important;color:#059669 !important}
.minisel b{color:#047857 !important}
.minisel{border-color:#d1fae5 !important}
.money-box{background:#064e3b !important}
.money-box .k{color:#a7f3d0 !important}
.page-panel .head h2{color:#0b3b2e !important}
.page-panel .head p{color:#047857 !important}
.page-panel .card h3,.page-panel .card h4{color:#0b3b2e}
.top-nav a{color:#0b3b2e}
/* grafikler mavi kalır: donut/çubuk/gauge renkleri JS'ten geliyor, dokunulmadı */
/* seçiciler (State / Filing Status) şablon ölçüsünde kalsın */
.minisel select{font:inherit !important;font-size:5.9px !important;font-weight:700 !important;
color:#047857 !important;background:transparent !important;border:0 !important;
width:100% !important;max-width:100% !important;padding:0 !important;
-webkit-appearance:none;appearance:none;outline:none;cursor:pointer;line-height:8px}
.minisel select option{font-size:12px;color:#0B1F3A}
@media(max-width:720px){.minisel select{font-size:14px !important}}
/* ==========================================================================
TASARIM NOT ŞERİDİ (Key Visuals / Interactive / Animation)
Bu şerit tasarım dokümantasyonudur, ziyaretçiye gösterilmez.
İnceleme için: adresin sonuna ?notlar=1 ekle.
========================================================================== */
.page-panel .notes{display:none !important}
body.notlari-goster .page-panel .notes{display:grid !important}
/* §4 maaş slider'ı */
.maas-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
background:linear-gradient(90deg,#059669,#10b981);outline:none;margin:6px 0 2px;cursor:pointer}
.maas-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
background:#fff;border:3px solid #059669;box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer}
.maas-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;
border:3px solid #059669;cursor:pointer}
.maas-slider{-moz-appearance:none}
/* §18 grafik geçişi: donut ve çubuklar yumuşak değişir (kısa, düşük CPU) */
.page-panel .donut-wrap svg circle{transition:stroke-dasharray .5s cubic-bezier(.4,0,.2,1),
stroke-dashoffset .5s cubic-bezier(.4,0,.2,1),stroke .3s}
.page-panel .kira-cubuk i,.page-panel .bar i,.page-panel .cubuk i,.page-panel .gauge i,
.page-panel .stacked i,.page-panel .flow i{transition:width .5s cubic-bezier(.4,0,.2,1),
height .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1),background .3s}
@media(prefers-reduced-motion:reduce){.page-panel *{transition:none !important;animation:none !important}}
/* §4 slider satırı */
.slider-satir{display:flex;align-items:center;gap:7px;margin:5px 0 2px}
.slider-etiket{font-size:5px;font-weight:800;color:#6B7C93;white-space:nowrap;letter-spacing:.03em}
.slider-satir .maas-slider{flex:1}
/* §13 aktif vergi dilimi vurgusu */
.brackets .br{transition:background .3s,outline-color .3s;border-radius:6px;outline:1px solid transparent}
.brackets .br.aktif{background:#ecfdf5;outline-color:#059669}
.brackets .br.aktif .range{color:#047857;font-weight:800}
/* §3/§18 sahne: önemli bilgiler sırayla belirir (kısa, düşük CPU) */
@keyframes atl-belir{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.page-panel .money-box{animation:atl-belir .38s cubic-bezier(.4,0,.2,1) both}
.page-panel .bk-row:nth-child(1),.page-panel .row:nth-child(1){animation:atl-belir .38s .10s cubic-bezier(.4,0,.2,1) both}
.page-panel .bk-row:nth-child(2),.page-panel .row:nth-child(2){animation:atl-belir .38s .16s cubic-bezier(.4,0,.2,1) both}
.page-panel .bk-row:nth-child(3),.page-panel .row:nth-child(3){animation:atl-belir .38s .22s cubic-bezier(.4,0,.2,1) both}
.page-panel .bk-row:nth-child(4),.page-panel .row:nth-child(4){animation:atl-belir .38s .28s cubic-bezier(.4,0,.2,1) both}
.page-panel .bk-row:nth-child(5),.page-panel .row:nth-child(5){animation:atl-belir .38s .34s cubic-bezier(.4,0,.2,1) both}
.page-panel .bk-row:nth-child(n+6),.page-panel .row:nth-child(n+6){animation:atl-belir .38s .40s cubic-bezier(.4,0,.2,1) both}
.page-panel .donut-wrap,.page-panel .gauge{animation:atl-belir .45s .3s cubic-bezier(.4,0,.2,1) both}
/* §6/§12 yatay karşılaştırma çubukları */
.bar-liste{margin-top:6px}
.bar-liste .bl{display:grid;grid-template-columns:26px 1fr 34px;align-items:center;gap:5px;
font-size:5.2px;font-weight:700;color:#4C6885;margin-bottom:3px}
.bar-liste .bl i{display:block;height:6px;border-radius:99px;background:linear-gradient(90deg,#059669,#34d399);
transform-origin:left center;animation:atl-buyu .5s cubic-bezier(.4,0,.2,1) both}
@keyframes atl-buyu{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bar-liste .bl b{color:#0B1F3A;font-weight:800;text-align:right}
.bar-liste .bl.secili i{background:linear-gradient(90deg,#0068F0,#38bdf8)}
.bar-liste-ulke .bl{grid-template-columns:30px 1fr 38px;font-size:5.4px}
.bar-liste-ulke .bl i{background:linear-gradient(90deg,#0068F0,#60a5fa)}
.bar-liste .veri-not{font-size:4.4px;color:#6B7C93;line-height:1.5;margin-top:4px}
/* ==========================================================================
§21 SEO KATMANI — panelin altındaki gerçek metin + veri tabloları
(grafiklerin yanında başlık, açıklama ve erişilebilir HTML tablo)
========================================================================== */
.seo-block{max-width:880px;margin:0 auto;padding:34px 22px 60px;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
color:#12243D;line-height:1.65;font-size:17px}
.seo-block h1{font-size:30px;line-height:1.25;margin:0 0 14px;color:#0B2E22;letter-spacing:-.01em}
.seo-block h2{font-size:21px;margin:32px 0 10px;color:#0B2E22}
.seo-ozet{font-size:18px;color:#33506B;margin:0 0 8px}
.seo-tablo{width:100%;border-collapse:collapse;margin:10px 0 6px;font-size:15px;
background:#fff;border:1px solid #E1ECE8;border-radius:12px;overflow:hidden}
.seo-tablo th{background:#F0F7F4;text-align:left;font-weight:800;color:#0B3B2E;
padding:10px 12px;border-bottom:1px solid #E1ECE8;white-space:nowrap}
.seo-tablo td{padding:9px 12px;border-bottom:1px solid #F2F6F5;color:#22405E}
.seo-tablo tr:last-child td{border-bottom:0}
.seo-tablo td:first-child{font-weight:700;color:#0B2E22}
.seo-tablo tbody tr:hover{background:#F8FCFA}
.seo-kaynak{font-size:14px;color:#5A7186;margin:8px 0 0;padding-left:20px}
.seo-kaynak li{margin-bottom:5px}
.seo-not{font-size:14px;color:#7C8FA3;border-left:3px solid #D6E7E0;padding-left:12px;margin-top:18px}
@media(max-width:720px){
.seo-block{font-size:16px;padding:26px 14px 48px}
.seo-block h1{font-size:23px}.seo-block h2{font-size:18px}.seo-ozet{font-size:16px}
.seo-tablo{font-size:13px;display:block;overflow-x:auto;white-space:nowrap}
}
/* §24 ana sayfa: araç kartları */
.pages{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 2px 2px}
.pages a{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:10px;
background:#F7FBFE;border:1px solid #E3EAF4;text-decoration:none;
transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s,border-color .18s}
.pages a:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(11,31,58,.08);border-color:#BBD9CF}
.pages a b{font-size:10px;font-weight:900;color:#059669;letter-spacing:.04em}
.pages a span{font-size:5.6px;color:#6B7C93;line-height:8px}
.pages a{font-size:7.4px;font-weight:800;color:#0B1F3A;line-height:10px}
/* ana sayfa akış kutuları hizalı dursun */
.page-panel .journey .flowleft .flowbox{min-height:34px}
.page-panel .journey .flowleft .flowbox strong{font-size:8.6px}
.page-panel .journey .flowleft .flowbox small{font-size:5.2px}
@media(max-width:720px){.pages{grid-template-columns:1fr 1fr;gap:10px}
.pages a{font-size:14px;line-height:19px;padding:12px}.pages a b{font-size:12px}
.pages a span{font-size:12px;line-height:17px}}
/* §11 animasyonlu göç rotası (harita üzerinde çizgi kendini çizer + hareketli nokta) */
@keyframes atl-rota{from{stroke-dashoffset:var(--uzunluk,400)}to{stroke-dashoffset:0}}
.route-map svg .rota-cizgi{stroke-dasharray:6 4}
.route-map svg .rota-cizgi[style]{stroke-dasharray:none}
@media(prefers-reduced-motion:reduce){.route-map svg .rota-nokta{display:none}}
/* §17 açılır bölüm (SSS) */
.seo-sss{border:1px solid #E1ECE8;border-radius:10px;background:#fff;margin:8px 0;padding:0 14px}
.seo-sss summary{cursor:pointer;font-weight:800;color:#0B2E22;padding:12px 0;font-size:17px;
list-style:none;display:flex;align-items:center;gap:8px}
.seo-sss summary::-webkit-details-marker{display:none}
.seo-sss summary:before{content:"";width:0;height:0;border-left:6px solid #059669;
border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .2s}
.seo-sss[open] summary:before{transform:rotate(90deg)}
.seo-sss summary:hover{color:#059669}
.seo-sss p{margin:0 0 14px;color:#33506B;font-size:16px}
/* §17 sekme şeridi */
.seo-sekme{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0 0}
.seo-sekme button{border:1px solid #D6E7E0;background:#F7FBF9;color:#33506B;font-weight:800;
font-size:14px;padding:8px 14px;border-radius:99px;cursor:pointer;font-family:inherit;
transition:background .18s,color .18s,border-color .18s}
.seo-sekme button:hover{border-color:#059669;color:#059669}
.seo-sekme button.aktif{background:#059669;border-color:#059669;color:#fff}
.seo-sekme-govde .seo-sekme-icerik h2{margin-top:14px}
@media(max-width:720px){.seo-sss summary{font-size:15px}.seo-sss p{font-size:15px}}
.page-main{display:block !important;text-align:left}
.page-main .page-panel{margin-left:auto !important;margin-right:auto !important;float:none !important}
.page-main .panel{margin-left:auto !important;margin-right:auto !important}
.page-main .seo-block{width:100%;margin-left:auto;margin-right:auto}